أساسيات الأنواع الحرفية للقوالب النصية
ابنوا أنواعًا نصية من الاتحادات والعناصر النائبة
أساسيات الأنواع الحرفية للقوالب النصية درس مجاني في TypeScript Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في TypeScript Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة TypeScript Academy 4 دروس في المجموع.
السلاسل النصية على مستوى النوع
تنشئ أنواع القوالب الحرفية أنواعًا جديدة من السلاسل النصية الحرفية بدمج أنواع سلاسل نصية أخرى. وتستخدم صيغة backtick والعنصر النائب نفسها التي تستخدمها السلاسل النصية القالبية في وقت التشغيل، لكنها تعمل على الأنواع فقط.
نوع قالب حرفي بسيط
تخيل اسم نوع مستعار Greeting معرّفًا كقالب حرفي يحتوي على النص Hello, متبوعًا بعنصر نائب للنوع Name. إذا كان Name هو الحرفي 'Ada'، فإن Greeting يكون نوعًا حرفيًا هو 'Hello, Ada'.
type Name = "Ada"
// type Greeting = template literal: Hello, then Name
// Greeting is the string literal type "Hello, Ada"
const g: "Hello, Ada" = "Hello, Ada"
console.log(g)تضمّن العناصر النائبة أنواعًا أخرى
يمكنك وضع أي نوع شبيه بالسلسلة النصية داخل العنصر النائب: قيمة حرفية، أو وسيط نوع، أو اتحاد. يستبدله TypeScript داخل النص المحيط لتكوين نوع حرفي جديد.
type World = "World"
// A template literal type with text Hello, and placeholder World
// yields the literal "Hello, World"
const hw: "Hello, World" = "Hello, World"
console.log(hw)دمج الاتحادات يضاعف التنويعات
عندما يحتوي عنصر نائب على اتحاد، يتوسع القالب ليشمل كل عنصر فيه. وينتج عن قالب يجمع بين 'a' | 'b' ولاحقة ثابتة اتحادٌ يضم كل تركيبة.
type Side = "left" | "right"
// template: Side followed by -margin
// expands to "left-margin" | "right-margin"
const m: "left-margin" | "right-margin" = "left-margin"
console.log(m)العناصر النائبة المتعددة تتضاعف معًا
يشكل عنصران نائبان من اتحادين حاصل ضرب ديكارتي. ويؤدي دمج الأحجام 'sm' | 'lg' مع الألوان 'red' | 'blue' باستخدام فاصل إلى أربعة أنواع حرفية.
type Size = "sm" | "lg"
type Color = "red" | "blue"
// template Size-Color expands to 4 combinations
const c: "sm-red" | "sm-blue" | "lg-red" | "lg-blue" = "lg-blue"
console.log(c)فائدة هذا الأسلوب
تتيح لك أنواع القوالب الحرفية وصف عائلات من السلاسل النصية بدقة — مثل أسماء أصناف CSS، وأسماء الأحداث، ومسارات التوجيه — بحيث يرفض المصرّف السلاسل غير الصحيحة قبل وقت التشغيل.
type Prefix = "btn"
type Variant = "primary" | "ghost"
// template Prefix--Variant => "btn--primary" | "btn--ghost"
const cls: "btn--primary" | "btn--ghost" = "btn--primary"
console.log(cls)تحويل الأرقام والقيم المنطقية
تتحول الأنواع غير النصية الموضوعة في نوع قالب حرفي تلقائيًا إلى صيغتها النصية. فالقيمة العددية الحرفية 42 تصبح النص 42 داخل نوع السلسلة النصية الناتج.
type Id = 42
// template id- followed by Id => "id-42"
const x: "id-42" = "id-42"
console.log(x)استخدام عنصر نائب عام
يمكن لدالة عامة إنشاء نوع إرجاع قالب حرفي من النوع الحرفي لوسيطها، بحيث تكون السلسلة النصية الدقيقة معروفة في كل موضع استدعاء.
function prefixed<T extends string>(s: T) {
return ("app-" + s) as "app-" extends string ? string : never
}
console.log(prefixed("home")) // app-homeتقييد المدخلات
يمكنك اشتراط أن تطابق قيمة ما نوع قالب حرفيًا. ولا تُقبل إلا السلاسل النصية التي توافق النمط الموصوف، ما يكشف الأخطاء الإملائية في وقت الترجمة.
type Pixel = "left" | "right"
function setSide(s: Pixel) { return s }
console.log(setSide("left"))
// setSide("top") // Error: not assignableالسلسلة العامة تكسر النمط
إذا كان العنصر النائب من النوع العام string بدلًا من نوع حرفي، ينهار القالب بأكمله إلى string. وتتطلب الدقة مدخلات حرفية، غالبًا باستخدام as const.
const dynamic: string = "anything"
// a template using dynamic yields just string, not a precise literal
const result: string = "prefix-" + dynamic
console.log(result)مواضع الاستخدام
تُعد أنواع القوالب الحرفية مثالية في أي موضع تتبع فيه السلاسل النصية بنيةً معينة: أصناف CSS المساعدة، والمعرّفات ذات البادئات، ومفاتيح الاستعلام، وأسماء الأحداث. فهي تحول اصطلاحات السلاسل النصية إلى عقود يتحقق منها المصرّف.
type Theme = "light" | "dark"
// template theme- followed by Theme => "theme-light" | "theme-dark"
const t: "theme-light" | "theme-dark" = "theme-dark"
console.log(t)تحقق سريع
اختبر مدى فهمك لأساسيات أنواع القوالب الحرفية.
مراجعة
تنشئ أنواع القوالب الحرفية أنواعًا حرفية من السلاسل النصية باستبدال العناصر النائبة داخل النص المحيط. وتتوسع العناصر النائبة الاتحادية لتشمل كل تركيبة، بينما تشكل الاتحادات المتعددة حاصل ضرب ديكارتي. تتحول القيم الحرفية غير النصية إلى صيغتها النصية. ويؤدي العنصر النائب العام string إلى اختزال النتيجة إلى string، لذلك تلزم المدخلات الحرفية، غالبًا باستخدام as const، للحصول على أنواع دقيقة. وبهذا تصبح اصطلاحات السلاسل النصية خاضعة للتحقق من المصرّف.
تعلم TypeScript مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 101
- الدروس
- 352
الأسئلة الشائعة
هل درس «أساسيات الأنواع الحرفية للقوالب النصية» مجاني؟
نعم — نص درس «أساسيات الأنواع الحرفية للقوالب النصية» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة TypeScript Academy، انتقل إلى CoddyKit PRO. تتضمن دورة TypeScript Academy 4 دروس في المجموع.
ماذا ستتعلم في «أساسيات الأنواع الحرفية للقوالب النصية»؟
ابنوا أنواعًا نصية من الاتحادات والعناصر النائبة تتمرن على TypeScript Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ TypeScript Academy؟
لا تُشترط خبرة سابقة. TypeScript Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «أساسيات الأنواع الحرفية للقوالب النصية»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس TypeScript Academy هذا؟
نعم. كل درس في TypeScript Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- أساسيات الأنواع الحرفية للقوالب النصية
- نمذجة السلاسل المهيكلة
- اتحادات السلاسل والإكمال التلقائي
- أنواع معالجة السلاسل المضمّنة