أخطاء المبتدئين في TypeScript للمستوى المتقدم

تعلم Python بسهولة دون إرهاق نظري. حل مهام عملية مع التحقق التلقائي واكتب الكود مباشرة في المتصفح.

أخطاء المبتدئين في TypeScript للمستوى المتقدم

TypeScript — أداة قوية تساعد في كتابة كود أكثر أمانًا وقابلية للتنبؤ. ومع ذلك، فإن الانتقال من JavaScript إلى TypeScript، خاصة على المستوى المتقدم، غالبًا ما يصاحبه أخطاء محددة. حتى المطورون الملمون بأساسيات الكتابة يرتكبون أخطاء نموذجية عند العمل مع الـ generics والأنواع الشرطية والتحميل الزائد. في هذه المقالة، سنحلل أكثر 4 أخطاء شيوعًا للمبتدئين المتقدمين ونوضح كيفية إصلاحها.

1. الاستخدام الخاطئ لـ Generic: فقدان معلومات النوع

من أكثر الأخطاء شيوعًا هو التصريح الواسع جدًا أو الضيق جدًا للـ generics. غالبًا ما يحدد المطورون النوع any داخل دالة generic، مما يلغي تمامًا مزايا TypeScript.

المشكلة

// سيء: الدالة تُرجع any، نفقد الكتابة
function getProperty(obj: any, key: string): any {
    return obj[key];
}

const user = { name: 'Alice', age: 30 };
const value = getProperty(user, 'name'); // value: any

الحل

// جيد: استخدام generic للحفاظ على النوع
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
    return obj[key];
}

const user = { name: 'Alice', age: 30 };
const value = getProperty(user, 'name'); // value: string

هام: استخدم دائمًا قيود extends للـ generics. هذا لا يحافظ على الأنواع فحسب، بل يوفر أيضًا الإكمال التلقائي في بيئة التطوير المتكاملة (IDE).

2. الإفراط في استخدام النوع `any` بدلاً من `unknown`

يضع العديد من المطورين المبتدئين any في كل مكان لا يمكنهم فيه تحديد النوع فورًا. هذا يقتل فائدة TypeScript بأكملها. النهج الصحيح هو استخدام unknown ثم تضييق النوع.

المشكلة

// سيء: any يسمح بفعل أي شيء
function parseData(data: any): void {
    console.log(data.toUpperCase()); // خطأ في وقت التشغيل إذا كان data رقمًا
    data.someMethod(); // لا يوجد أي تحقق
}

الحل

// جيد: unknown يتطلب التحقق
function parseData(data: unknown): void {
    if (typeof data === 'string') {
        console.log(data.toUpperCase()); // آمن
    } else if (Array.isArray(data)) {
        console.log(data.length);
    } else {
        console.log('نوع بيانات غير معروف');
    }
}

استخدم any فقط في الحالات القصوى (الترحيل من JS أو العمل مع API ديناميكية). لكل شيء آخر — استخدم unknown مع حراس النوع (type guards).

3. أخطاء في التحميل الزائد للدوال (Function Overloads)

التحميل الزائد للدوال في TypeScript هو آلية قوية ولكنها خادعة. الخطأ النموذجي: ترتيب غير صحيح للتوقيعات أو عدم تطابق التنفيذ مع التحميلات الزائدة المعلنة.

المشكلة

// سيء: التوقيعات تتعارض مع بعضها البعض
function process(value: string): string;
function process(value: number): number;
function process(value: string | number): string | number {
    // التنفيذ لا يأخذ في الاعتبار جميع الحالات
    return value.toString(); // نُرجع string، على الرغم من أننا وعدنا بـ number للـ number
}

الحل

// جيد: فصل واضح للمنطق
function process(value: string): string;
function process(value: number): number;
function process(value: string | number): string | number {
    if (typeof value === 'string') {
        return value.toUpperCase(); // نُرجع string
    } else {
        return value * 2; // نُرجع number
    }
}

const result1 = process('hello'); // string
const result2 = process(10);      // number

نصيحة: تحقق دائمًا من أن تنفيذ الدالة يغطي جميع الخيارات المعلنة في التوقيعات. استخدم typeof أو حراس النوع المخصصين.