مراجعة الكود في TypeScript: ما يجب التحقق منه وكيفية تقديم الملاحظات

مدرب بايثون أونلاين للمبتدئين

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

ابدأ الدورة

مراجعة الكود في TypeScript: ما يجب التحقق منه وكيفية تقديم الملاحظات عمليًا

\n\n

مراجعة الكود ليست مجرد إجراء شكلي، بل أداة قوية لتحسين جودة الكود. في TypeScript، مع نظام الأنواع الغني الخاص به، يمكن أن تكون المراجعة فعالة بشكل خاص. في هذه المقالة، سنناقش ما يجب التركيز عليه عند التحقق من كود TypeScript، وكيفية تقديم ملاحظات تكون مفيدة وليست مسيئة. جميع الأمثلة مأخوذة من كود حقيقي.

\n\n

1. الأنواع والتعليقات التوضيحية: تجنب `any` واستخدم الدقة

\n\n

أول ما يلفت الانتباه في مراجعة كود TypeScript هو الأنواع. تم إنشاء TypeScript لالتقاط الأخطاء في مرحلة التجميع، لذا فإن any هو علامة حمراء.

\n\n

ما يجب التحقق منه:

\n
    \n
  • وجود any. يجب تبرير كل استخدام لـ any. إذا كان ذلك بسبب الترحيل من JavaScript، فهذا مقبول، ولكن في الكود الجديد لا.
  • \n
  • صحة الأنواع. لا تستخدم string حيث تحتاج إلى enum أو union type.
  • \n
  • التصنيف المفرط. TypeScript قادر على استنتاج الأنواع. لا تكتب const x: number = 5 بل اكتب const x = 5.
  • \n
  • الإعدادات الصارمة. تحقق من أن tsconfig.json يحتوي على strict: true و noImplicitAny و strictNullChecks.
  • \n
\n\n

مثال على كود سيء:

\n
function processData(data: any) {\n  return data.name.toLowerCase();\n}
\n\n

كيفية الإصلاح:

\n
interface User {\n  name: string;\n}\n\nfunction processData(data: User): string {\n  return data.name.toLowerCase();\n}
\n\n

كيفية تقديم الملاحظات:

\n

بدلاً من قول "أنت تستخدم any، هذا سيء"، قل: "هنا any يعطل التحقق من الأنواع. دعنا نصف واجهة User - هذا سيزيد من الأمان وقابلية قراءة الكود".

\n\n

2. التعامل مع null و undefined: strictNullChecks ينقذ الموقف

\n\n

أخطاء Cannot read property of undefined كلاسيكية. يساعد TypeScript مع strictNullChecks في تجنبها، ولكن فقط إذا قام المطور بمعالجة القيم القابلة للصفر بشكل صحيح.

\n\n

ما يجب التحقق منه:

\n
    \n
  • التحقق من null/undefined قبل الوصول إلى الخصائص.
  • \n
  • استخدام optional chaining (?.) - هذا حديث وآمن.
  • \n
  • عامل ! (non-null assertion) - استخدمه فقط إذا كنت متأكدًا 100% أن القيمة ليست null. من الأفضل استبداله بفحص صريح.
  • \n
  • الاستخدام الصحيح لـ ?? (nullish coalescing) بدلاً من || للقيم الافتراضية.
  • \n
\n\n

مثال على كود سيء:

\n
function getCity(user: User | null): string {\n  return user!.address!.city; // خطير!\n}
\n\n

كيفية الإصلاح:

\n
function getCity(user: User | null): string {\n  return user?.address?.city ?? 'Unknown';\n}
\n\n

كيفية تقديم الملاحظات:

\n

"استخدام ! هنا محفوف بالمخاطر - إذا كان user null، سيحدث خطأ. دعنا نستبدله بـ ?. و ?? - هذا آمن وقابل للقراءة".

\n\n

3. الأدوية العامة والأنواع المساعدة: لا تعقد الأمور دون داع

\n\n

الأدوية العامة ميزة قوية، ولكن من السهل المبالغة في تعقيدها. يجب على المراجع مراقبة التوازن بين المرونة وقابلية القراءة.

\n\n

ما يجب التحقق منه:

\n
    \n
  • التعقيد المفرط. إذا تم استخدام الدواء العام مرة واحدة فقط، فربما لا يكون ضروريًا.
  • \n
  • الاستخدام الصحيح لـ extends - قيد الأدوية العامة حتى لا تقبل كل شيء.
  • \n
  • الأنواع المساعدة (Partial، Pick، Omit، Record) - استخدامها يبسط الكود.
  • \n
  • أنواع القيم المرتجعة - الدالة ذات الدواء الع

المدونات

توصيات الكتب