أنواع وتأكيدات حرفية

يوفر TypeScript أدوات متقدمة لتضييق نطاق القيم المحتملة للمتغيرات وإجبار المترجم على التعرف على أنواع أكثر تحديدًا عند الضرورة.

أنواع حرفية

يمثل النوع الحرفي قيمة واحدة محددة (على سبيل المثال، سلسلة أو رقم محدد). عادة ما يتم دمجها مع أنواع النقابات:

type TrafficLight = 'red' | 'yellow' | 'green';
let light: TrafficLight;

light = 'red'; // OK
light = 'blue'; // Error: "blue" is not assignable to TrafficLight

نوع التأكيدات (as)

في بعض الأحيان يكون لديك معلومات حول نوع لا يمكن لـ TypeScript معرفته في وقت الترجمة. في هذه الحالات، يمكنك استخدام تأكيد النوع باستخدام الكلمة الأساسية as:

const myCanvas = document.getElementById('main_canvas') as HTMLCanvasElement;

يخبر التأكيد المترجم: "ثق بي، أعلم أن هذا العنصر هو HTMLCanvasElement". ولا يقوم بإجراء أي عمليات فحص أو إرسال في وقت التشغيل؛ فهو يساعد فقط مدقق النوع.

التأكيدات الثابتة (as const)

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

const colors = ['red', 'green', 'blue'] as const;
// colors[0] = "yellow"; // Error: array is read-only

أنواع النماذج الحرفية

يتم إنشاء الأنواع الحرفية للقالب أعلى سلاسل قالب JavaScript، ولكنها تُستخدم في مواضع الكتابة. أنها تسمح بدمج أنواع حرفية متعددة في نوع واحد:

type Size = 'small' | 'large';
type Color = 'red' | 'blue';

// Creates the union: "small-red" | "small-blue" | "large-red" | "large-blue"
type ItemId = `${Size}-${Color}`;

أدوات السلسلة في الأنواع الحرفية للقالب

يوفر TypeScript أنواع أدوات مساعدة خاصة لمعالجة الأحرف ضمن الأنواع الحرفية للقالب:

• Capitalize<StringType>: تكبير الحرف الأول من السلسلة.
• Uncapitalize<StringType>: إلغاء كتابة الحرف الأول من السلسلة.
• Uppercase<StringType>: تحويل السلسلة بأكملها إلى أحرف كبيرة.
• Lowercase<StringType>: تحويل السلسلة بأكملها إلى أحرف صغيرة.

type ActionType = 'click' | 'hover';

// Generates: "onClick" | "onHover"
type EventHandlers = `on${Capitalize<ActionType>}`;

جربه بنفسك

التمرين 1: اتجاه الاتحاد الحرفي

التمرين 2: التأكيد على JSON.parse

التمرين 3: النموذج الحرفي للأحداث

التمرين 4: النوع الحرفي للقالب مع الكتابة بالأحرف الكبيرة