أفضل الممارسات للمنطق الشرطي في TypeScript

أفضل الممارسات للمنطق الشرطي في TypeScript

توضح هذه المقالة أفضل الممارسات للمنطق الشرطي في TypeScript۔

YouTube Video

أفضل الممارسات للمنطق الشرطي في TypeScript

تضييق الأنواع باستخدام حراس الأنواع (Type Guards)

من خلال الاستفادة من نظام الأنواع في TypeScript واستخدام حراس الأنواع داخل عبارات if، يمكنك تحسين أمان النوع وقابلية القراءة.۔

1function processInput(input: string | number) {
2    if (typeof input === "string") {
3        console.log(`String input: ${input.toUpperCase()}`);
4    } else {
5        console.log(`Number input: ${input.toFixed(2)}`);
6    }
7}

استخدام typeof وحراس الأنواع الأخرى يضمن أن الكود داخل كل كتلة آمن النوع وذو صلة بالسياق.۔

تجنب العبارات الشرطية المتداخلة if

العبارات الشرطية if المتداخلة بعمق تقلل من قابلية قراءة الكود وسهولة صيانته.۔ بدلاً من ذلك، استخدم العوائد المبكرة، أو العمليات المنطقية، أو استخرج الوظائف.۔

مثال سيء:

1function checkUser(user: { age?: number; isAdmin?: boolean }) {
2    if (user.age) {
3        if (user.age > 18) {
4            if (user.isAdmin) {
5                console.log("User is an adult admin.");
6            }
7        }
8    }
9}

مثال محسّن:

1function checkUser(user: { age?: number; isAdmin?: boolean }) {
2    if (!user.age || user.age <= 18 || !user.isAdmin) {
3        return;
4    }
5    console.log("User is an adult admin.");
6}

هذا النهج يبسط الكود ويجعل المنطق أكثر وضوحًا.۔

استخدام السلسلة الاختيارية (Optional Chaining)

عند التحقق من الخصائص المتداخلة، استخدم السلسلة الاختيارية (?.) لتجنب شروط if غير الضرورية.۔

بدون السلسلة الاختيارية:

1if (user && user.profile && user.profile.email) {
2    console.log(user.profile.email);
3}

باستخدام السلسلة الاختيارية:

1if (user?.profile?.email) {
2    console.log(user.profile.email);
3}

يسهم هذا في تقليل الكود المكرر وتحسين قابلية القراءة.۔ في هذا السياق، يشير الكود المكرر إلى الكود القياسي المتكرر الذي يُطلب غالبًا لتنفيذ مهام معينة في البرمجة.۔

استخدام عوامل المساواة الصارمة

يدعم TypeScript الكتابة الصارمة، واستخدام عوامل المساواة الصارمة (===) أو عدم المساواة الصارمة (!==) يساعد على منع تحويل الأنواع غير المتوقع.۔

مثال سيء:

1if (value == "123") {
2    console.log("Value is 123.");
3}

مثال محسّن:

1if (value === "123") {
2    console.log("Value is 123.");
3}

استخدام القيم المعدودة (Enums) أو الأنواع الصريحة للشروط الواضحة

استخدام القيم المعدودة (Enums) أو الأنواع الصريحة يوضح الشروط ويقلل من احتمالات الأخطاء.۔

 1type Status = "success" | "error" | "loading";
 2
 3function displayMessage(status: Status) {
 4    if (status === "success") {
 5        console.log("Operation succeeded.");
 6    } else if (status === "error") {
 7        console.log("Operation failed.");
 8    } else {
 9        console.log("Loading...");
10    }
11}

من خلال تعريف القيم المتوقعة، يمكن لـ TypeScript اكتشاف الأنواع وضمان الدقة.۔

دمج الشروط المتشابهة

عندما تشترك الشروط المتعددة في نفس المنطق، قم بدمجها باستخدام العوامل المنطقية أو عبارة التبديل (switch statement)۔

مثال سيء:

1if (role === "admin") {
2    grantAccess();
3}
4if (role === "superadmin") {
5    grantAccess();
6}

مثال محسّن:

1if (role === "admin" || role === "superadmin") {
2    grantAccess();
3}

بدلاً من ذلك، استخدم عبارة التبديل (switch statement) للتعامل مع الفروع الواضحة المتعددة:

 1switch (role) {
 2    case "admin":
 3    case "superadmin":
 4        grantAccess();
 5        break;
 6    case "user":
 7        console.log("Limited access.");
 8        break;
 9    default:
10        console.log("No access.");
11}

تجنب جعل التعبيرات الشرطية معقدة

التعبيرات الشرطية المعقدة في عبارات if تقلل من قابلية القراءة۔ قم باستخراجها إلى متغيرات أو وظائف ذات معنى۔

مثال سيء:

1if (user.age > 18 && user.isAdmin && user.permissions.includes("write")) {
2    console.log("User can write.");
3}

مثال محسّن:

1const isAdultAdminWithWriteAccess =
2    user.age > 18 && user.isAdmin && user.permissions.includes("write");
3
4if (isAdultAdminWithWriteAccess) {
5    console.log("User can write.");
6}

تسمية الشروط تحسن الوضوح وتجعل الكود موثقاً بذاته۔

استخدم العامل الثلاثي (ternary operators) للشروط البسيطة

بالنسبة للشروط البسيطة، فإن استخدام العامل الثلاثي يجعل الكود مختصراً۔

مثال:

1const message = isLoggedIn ? "Welcome back!" : "Please log in.";
2console.log(message);

ومع ذلك، تجنب استخدام العامل الثلاثي للشروط المعقدة لأنه يقلل من قابلية القراءة۔

استبدل الفروع الشرطية بالمصفوفات أو الخرائط

عندما تكون الحالة هي مجرد تعيين قيم، يمكن أن يؤدي استخدام المصفوفات أو الخرائط إلى تحسين قابلية قراءة الكود وصيانته مقارنةً بتعليمات switch أو كتل if-else المعقدة۔ في TypeScript، يمكنك الاستفادة من معلومات الأنواع لتنفيذ ذلك بطريقة أكثر أماناً۔

مثال سيء:

 1function getDayName(day: number): string {
 2    switch (day) {
 3        case 0:
 4            return "Sunday";
 5        case 1:
 6            return "Monday";
 7        case 2:
 8            return "Tuesday";
 9        case 3:
10            return "Wednesday";
11        case 4:
12            return "Thursday";
13        case 5:
14            return "Friday";
15        case 6:
16            return "Saturday";
17        default:
18            return "Invalid day";
19    }
20}

مثال محسّن: باستخدام مصفوفة

 1function getDayName(day: number): string {
 2    const days = [
 3        "Sunday",
 4        "Monday",
 5        "Tuesday",
 6        "Wednesday",
 7        "Thursday",
 8        "Friday",
 9        "Saturday"
10    ];
11    return days[day] ?? "Invalid day";
12}

مثال محسّن: باستخدام خريطة

 1function getDayName(day: number): string {
 2    const dayMap = new Map<number, string>([
 3        [0, "Sunday"],
 4        [1, "Monday"],
 5        [2, "Tuesday"],
 6        [3, "Wednesday"],
 7        [4, "Thursday"],
 8        [5, "Friday"],
 9        [6, "Saturday"]
10    ]);
11    return dayMap.get(day) ?? "Invalid day";
12}

الخاتمة

من خلال اتباع هذه الممارسات الأفضل، يمكنك جعل عبارات if في TypeScript واضحة وفعالة وقابلة للصيانة۔ من خلال استخدام ميزات TypeScript مثل حراس الأنواع، السلاسل الاختيارية، والتعدادات، يمكنك تحسين وضوح الكود وقوته.۔ من خلال اتباع أفضل الممارسات، يمكنك الحفاظ على الشروط موجزة وواضحة، مما يؤدي إلى كود أسهل للفهم والصيانة.۔

يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔

YouTube Video