الوضع الصارم والتخلّص من any
فعّل جميع أعلام الوضع الصارم في tsconfig، واستخدم unknown بدلًا من any، وطبّق تأكيدات الأنواع بأمان، ورحّل ملفًا ضعيف تحديد الأنواع إلى الوضع الصارم
الوضع الصارم والتخلّص من any درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.
لماذا الوضع الصارم؟
يؤدي ضبط strict: true في tsconfig.json إلى تفعيل جميع علامات أمان TypeScript، وهو المعيار المطلوب للمشاريع الجادة. فهو يكتشف أخطاء null والمعاملات غير المحددة النوع والتعيينات غير الآمنة أثناء التجميع.
ما الذي يفعّله strict
strict علامة شاملة تفعّل ما يلي: noImplicitAny، strictNullChecks، strictFunctionTypes، strictBindCallApply، strictPropertyInitialization، alwaysStrict، noImplicitThis، useUnknownInCatchVariables.
strictNullChecks
بدونه، يمكن إسناد null وundefined إلى كل نوع، وهما مصدر دائم للأخطاء. ومع تفعيله، يجب التعامل مع حالات null صراحةً.
// Without strictNullChecks — runtime error:
function greet(name: string) { return name.toUpperCase(); }
greet(null); // compiler allows, crashes at runtime
// With strictNullChecks:
function greet(name: string | null) {
if (name == null) return '';
return name.toUpperCase();
}noImplicitAny
تتحول المعاملات التي لا تحتوي على تعليق نوع إلى any افتراضيًا من دون هذه العلامة، ما يتجاوز نظام الأنواع بصمت. ومع noImplicitAny، يجب تحديد أنواعها.
// Without noImplicitAny:
function format(value) { return value.toUpperCase(); } // value: any
// With:
function format(value: string) { return value.toUpperCase(); }strictPropertyInitialization
تصبح خصائص الأصناف التي لا تحتوي على مُهيِّئ مؤكد قابلة لأن تكون undefined. إما أن تهيّئها، أو تستخدم عامل الإسناد المؤكد !.
class User {
name!: string; // tell TS: I'll set this elsewhere
age = 0; // default initialiser
email: string; // ERROR with strictPropertyInitialization
constructor(email: string) { this.email = email; } // FIX: init in ctor
}استخدم unknown بدلًا من any
يتجاوز any فحص الأنواع. أما unknown فهو آمن من ناحية الأنواع، إذ يجب تضييق نوعه قبل استخدامه. فضّل unknown دائمًا.
// any — no checks, bug magnet:
function parse(input: any) {
return input.toUpperCase(); // compiler is fine, runtime may crash
}
// unknown — must narrow:
function parse(input: unknown) {
if (typeof input === 'string') {
return input.toUpperCase();
}
throw new Error('Expected string');
}استخدام تأكيدات الأنواع بأمان
إذا اضطررت إلى استخدام تأكيد نوع (لأنك تعرف ما هو أفضل من TS)، ففضّل صيغة as. لا تستخدم تأكيدًا مزدوجًا (x as unknown as T) إلا إذا لم يكن أمامك خيار فعلي، فهو علامة على مشكلة في الشيفرة.
const el = document.getElementById('app') as HTMLDivElement;
el.style.background = 'blue';
// Safer alternative: runtime check
const el = document.getElementById('app');
if (!(el instanceof HTMLDivElement)) throw new Error('app missing');
el.style.background = 'blue'; // narrowed to HTMLDivElementالتخلص من any في المشروع
الاستراتيجية: فعّل strict، ثم أصلح الأخطاء الناتجة ملفًا تلو الآخر. استخدم unknown مع تضييق النوع. أضف @ts-expect-error مع تعليق TODO إلى المواضع المعروفة التي تحتوي على أخطاء، حتى لا يمكن تجاهلها.
قاعدة Lint: no-explicit-any
أضف @typescript-eslint/no-explicit-any إلى إعدادات ESLint لمنع إضافة any جديدة.
// .eslintrc.json
{
"rules": {
"@typescript-eslint/no-explicit-any": "error"
}
}strictFunctionTypes
يفرض فحص معاملات الدوال بالتغاير العكسي، ويمنع إسناد دوال ذات أنواع معاملات أوسع من المتوقع، الأمر الذي قد يؤدي إلى انهيار وقت التشغيل.
نوع متغيّر catch
يجعل useUnknownInCatchVariables استنتاج e: unknown في catch (e) بدلًا من any. يجب تضييق النوع قبل الوصول إلى الخصائص.
try {
doRisky();
} catch (e) {
// e is unknown
if (e instanceof Error) {
console.error(e.message);
} else {
console.error('Unknown error', e);
}
}نصائح الترحيل
فعّل strict في المشاريع الجديدة منذ اليوم الأول. أما في المشاريع القديمة، ففعّل العلامات تدريجيًا. ابدأ بـ strictNullChecks (فائدته الأكبر)، ثم noImplicitAny. استخدم //@ts-expect-error بدلًا من //@ts-ignore، حتى يُزال التعليق عند إصلاح المشكلة.
اختبار سريع
لماذا يُعد unknown أكثر أمانًا من any عندما لا تعرف نوع قيمة ما؟
مراجعة: الوضع الصارم
فعّل strict: true للحصول على أمان كامل. يفرض strictNullChecks التعامل مع null. ويتطلب noImplicitAny تحديد أنواع المعاملات. استخدم strictPropertyInitialization لحقول الأصناف. استخدم unknown بدلًا من any، وضيّق النوع باستخدام حراس الأنواع. تجنّب التأكيدات المزدوجة. استخدم no-explicit-any مع Lint. رحّل الشيفرة القديمة ملفًا تلو الآخر باستخدام علامات @ts-expect-error.
الأسئلة الشائعة
هل درس «الوضع الصارم والتخلّص من any» مجاني؟
نعم — نص درس «الوضع الصارم والتخلّص من any» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.
ماذا ستتعلم في «الوضع الصارم والتخلّص من any»؟
فعّل جميع أعلام الوضع الصارم في tsconfig، واستخدم unknown بدلًا من any، وطبّق تأكيدات الأنواع بأمان، ورحّل ملفًا ضعيف تحديد الأنواع إلى الوضع الصارم تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟
لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «الوضع الصارم والتخلّص من any»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟
نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- أنواع Template Literal
- Decorators والبيانات الوصفية
- TypeScript مع React: الأنواع العامة لـ FC وhooks
- الوضع الصارم والتخلّص من any