TypeScript Academy · درس

الكلمة المفتاحية as لتأكيد الأنواع

تجاوزوا الأنواع المستنتجة عمدًا باستخدام as

الكلمة المفتاحية as لتأكيد الأنواع درس مجاني في TypeScript Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في TypeScript Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة TypeScript Academy 4 دروس في المجموع.

ما تأكيد النوع؟

يخبر تأكيد النوع المصرّفَ «ثق بي، فأنا أعلم أن هذه القيمة من النوع T». تستخدمون الكلمة المفتاحية as: value as Type. وهو يغيّر الطريقة التي يرى بها مدقق الأنواع القيمة، لا القيمة نفسها.

const raw: unknown = 'hello world';
const text = raw as string;
console.log(text.toUpperCase());

صياغة as

اكتبوا التعبير، ثم as، ثم النوع الهدف. توجد أيضًا صياغة أقدم باستخدام الأقواس الزاوية، لكن الصياغة as مفضلة لأنها تعمل في كل مكان، بما في ذلك ملفات JSX/TSX.

const value: unknown = 42;
const n = value as number;
console.log(n + 8);

التأكيدات لا تغيّر وقت التشغيل

هذه نقطة مهمة: التأكيدات تعليمة لا تعمل إلا في وقت الترجمة. إذ تُحذف عند تشغيل الشيفرة. فلا يحدث أي تحويل أو تحقق؛ فإذا كان التأكيد خاطئًا، تظل قيمة وقت التشغيل دون تغيير وقد تتسبب في سلوك غير صحيح.

const v: unknown = 'not a number';
const n = v as number; // compiles, but v is still a string
console.log(typeof n); // 'string' at runtime!

متى تكون التأكيدات صالحة؟

لا يسمح TypeScript بالتأكيدات المباشرة إلا بين أنواع متداخلة، أي عندما يكون أحد النوعين قابلًا للإسناد إلى الآخر. يمكنكم تأكيد unknown إلى string، أو توسيع النوع أو تضييقه ضمن علاقة قائمة بين النوعين.

const u: unknown = 'ok';
const s = u as string; // valid: unknown overlaps everything
const broad = s as string | number; // valid widening
console.log(s, broad);

التأكيدات المباشرة غير الصالحة

إذا لم يكن بين نوعين أي تداخل، يرفض TypeScript التأكيد المباشر باعتباره خطأً محتملًا. فعلى سبيل المثال، يُمنع تأكيد string مباشرةً إلى number.

const s = 'hello';
// const n = s as number; // Error: neither type sufficiently overlaps
console.log('Direct unrelated assertions are blocked');

تضييق اتحاد باستخدام as

من الاستخدامات الشائعة والصحيحة تأكيد قيمة اتحاد إلى أحد أعضائه عندما تكون لديكم معرفة لا يملكها المصرّف. استخدموا ذلك باعتدال؛ فعادةً ما يكون فحص وقت التشغيل أكثر أمانًا.

type Shape = { kind: 'circle'; r: number } | { kind: 'square'; s: number };
const data: Shape = { kind: 'circle', r: 5 };
const circle = data as { kind: 'circle'; r: number };
console.log(circle.r);

تأكيد أنواع عناصر DOM

من الاستخدامات العملية الكلاسيكية أن تُرجع استعلامات DOM نوعًا عامًا مثل HTMLElement | null. وعندما تعرفون العنصر المحدد، أكدوا نوعه للوصول إلى خصائص خاصة بذلك العنصر.

// document.getElementById returns HTMLElement | null
// const input = document.getElementById('email') as HTMLInputElement;
// console.log(input.value);
console.log('Assert HTMLElement to HTMLInputElement for .value');

لماذا نحتاج إلى تأكيدات DOM؟

لا تستطيع واجهات DOM البرمجية معرفة العنصر الملموس الذي ستحصلون عليه، ولذلك تُرجع أنواعًا عامة. ويتيح تأكيد النوع الفرعي المحدد (مثل HTMLInputElement) الوصول إلى خصائص مثل value أو checked.

// const canvas = document.querySelector('#c') as HTMLCanvasElement;
// const ctx = canvas.getContext('2d');
console.log('querySelector returns Element | null; assert to specialize');

تأكيدات const حالة خاصة

لقد رأيتم as const من قبل. وهو تأكيد خاص يجعل القيمة للقراءة فقط بعمق، مع استخدام أنواع حرفية. وهو التأكيد الوحيد الآمن دائمًا، لأنه لا يفعل سوى تضييق النوع.

const tuple = [1, 2, 3] as const;
// type: readonly [1, 2, 3]
console.log(tuple.length);

التأكيدات تتجاوز الأمان

لأن التأكيدات تخبر المصرّف بالتوقف عن التحقق، فإنها تنقل المسؤولية إليكم. فقد يخفي التأكيد غير الصحيح خطأً حقيقيًا في النوع إلى أن يتسبب في انهيار الشيفرة وقت التشغيل. استخدموها فقط عندما تكون معرفتكم الفعلية أكبر مما يعرفه المصرّف.

const data: unknown = { id: 1 };
const user = data as { id: number; name: string };
// name does not exist at runtime
console.log(user.name); // undefined, no compile error

فضّلوا التضييق على التأكيد

متى أمكن، فضّلوا تضييق النوع وقت التشغيل (باستخدام حُرّاس الأنواع) على التأكيدات. فالتضييق يثبت النوع، أما التأكيد فلا يتجاوز الادعاء به. خصصوا as للحالات التي لا يستطيع التضييق التعبير عنها، مثل تخصيص عناصر DOM.

function safe(v: unknown): number {
  if (typeof v === 'number') return v; // proven
  return 0;
}
console.log(safe(10), safe('x'));

تحقق سريع

اختبروا مدى فهمكم لتأكيدات الأنواع.

مراجعة: تأكيدات as

لقد تعلمتم أن:

تخبر value as Type المصرّفَ بأن يتعامل مع قيمة على أنها من نوع محدد.
التأكيدات لا تعمل إلا في وقت الترجمة؛ فلا تحويل أو تحقق يحدث وقت التشغيل.
لا يُسمح بها إلا بين أنواع متداخلة.
تشمل الاستخدامات الصحيحة الشائعة تضييق unknown وتخصيص أنواع عناصر DOM. وفضّلوا التضييق متى أمكن.

بعد ذلك، سنتناول معامل التأكيد بعدم كون القيمة فارغة.

const raw: unknown = 'data';
const s = raw as string;
console.log(s.length);

الأسئلة الشائعة

هل درس «الكلمة المفتاحية as لتأكيد الأنواع» مجاني؟

نعم — نص درس «الكلمة المفتاحية as لتأكيد الأنواع» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة TypeScript Academy، انتقل إلى CoddyKit PRO. تتضمن دورة TypeScript Academy 4 دروس في المجموع.

ماذا ستتعلم في «الكلمة المفتاحية as لتأكيد الأنواع»؟

تجاوزوا الأنواع المستنتجة عمدًا باستخدام as تتمرن على TypeScript Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ TypeScript Academy؟

لا تُشترط خبرة سابقة. TypeScript Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «الكلمة المفتاحية as لتأكيد الأنواع»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس TypeScript Academy هذا؟

نعم. كل درس في TypeScript Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى TypeScript Academy