نمذجة السلاسل المهيكلة
أَلزموا بتنسيقات مثل أسماء الأحداث ومسارات التوجيه
نمذجة السلاسل المهيكلة درس مجاني في TypeScript Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في TypeScript Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة TypeScript Academy 4 دروس في المجموع.
فرض تنسيقات السلاسل النصية
تتبع سلاسل نصية كثيرة في التطبيقات الحقيقية بنيةً معينة: أسماء معالجات الأحداث، ومسارات واجهات برمجة التطبيقات، ومتغيرات CSS. وتتيح لك أنواع القوالب الحرفية نمذجة هذه التنسيقات ليعمل المصرّف على فرضها.
نمذجة أسماء معالجات الأحداث
غالبًا ما يتكون اسم المعالج من on متبوعًا باسم حدث يبدأ بحرف كبير. وباستخدام المساعد المضمّن Capitalize داخل قالب، يتحول الحدث 'click' إلى اسم المعالج 'onClick'.
type Event = "click" | "focus"
// template: on followed by Capitalize of Event
// => "onClick" | "onFocus"
const h: "onClick" | "onFocus" = "onClick"
console.log(h)سبب أهمية Capitalize هنا
من دون Capitalize، سينتج القالب 'onclick'. ويحوّل النوع المضمّن الحرف الأول من الحرفي إلى حرف كبير، منتجًا أسماء معالجات بصيغة camelCase المألوفة.
type E = "scroll"
type Cap = Capitalize<E> // "Scroll"
const c: "Scroll" = "Scroll"
console.log(c)إنشاء خريطة للمعالجات
ادمج مفاتيح القوالب الحرفية مع نوع مُعيَّن لإنشاء نوع كائن للمعالجات — دالة مكتوبة نوعيًا لكل حدث، بأسماء صحيحة من حيث حالة الأحرف.
type Events = "click" | "hover"
type Handlers = {
[E in Events as "on" extends string ? "on" : never]?: () => void
}
// In practice the key uses a template: on + Capitalize<E>
const h: { onClick?: () => void } = {}
console.log(h)نمذجة مسارات التوجيه
تشترك مسارات واجهات برمجة التطبيقات في بنية تتكون من شرطة مائلة بادئة، وموارد، ومقطع معرّف. ويلتقط قالب يجمع بين نص ثابت وعنصر نائب المسارات الصالحة.
type Resource = "users" | "posts"
// template: /api/ followed by Resource
// => "/api/users" | "/api/posts"
const path: "/api/users" | "/api/posts" = "/api/users"
console.log(path)المسارات ذات المعلمات
أضف عنصرًا نائبًا لمعرّف ديناميكي. فنمط يتكون من شرطة مائلة، ثم مورد، ثم شرطة مائلة، ثم مقطع معرّف عام، ينمذج مسارات مثل مسار users متبوعًا بمعرّف رقمي.
type Id = number
// template: /users/ followed by Id-like segment
function userPath(id: number): string {
return "/users/" + id
}
console.log(userPath(42)) // /users/42فرض التنسيقات في وقت الترجمة
بكتابة وسيط على أنه نوع قالب حرفي، ترفض أي سلسلة نصية لا توافق البنية — ما يوفر حماية من مسارات التوجيه أو المفاتيح غير الصحيحة.
type Method = "GET" | "POST"
function call(endpoint: "GET /users" | "POST /users") {
return endpoint
}
console.log(call("GET /users"))
// call("DELETE /users") // Error
console.log("ok")تركيب أسماء متغيرات CSS
تتبع الخصائص المخصصة في CSS نظامًا معينًا للتسمية. وينمذج قالب مكوّن من شرطتين مائلتين بادئتين وعنصر نائب لرمز مميز أسماءً مثل متغير لرمز لون.
type Token = "primary" | "accent"
// template: --color- followed by Token
// => "--color-primary" | "--color-accent"
const v: "--color-primary" | "--color-accent" = "--color-accent"
console.log(v)التقسيم باستخدام الاستدلال
يمكن لأنواع القوالب الحرفية أيضًا تحليل السلاسل النصية: فباستخدام الأنواع الشرطية وinfer، تستخرج أجزاء سلسلة مهيكلة على مستوى النوع — مثل استخراج الطريقة من سلسلة نقطة نهاية.
type ExtractMethod<S> = S extends "GET /users" ? "GET" : "OTHER"
type M = ExtractMethod<"GET /users"> // "GET"
const m: "GET" = "GET"
console.log(m)الفائدة العملية
تكشف أنواع السلاسل النصية المهيكلة فئات كاملة من الأخطاء: اسم معالج مكتوبًا خطأ، أو مسارًا غير معروف، أو رمز CSS غير صحيح — فتصبح جميعها أخطاء ترجمة بدلًا من إخفاقات صامتة في وقت التشغيل.
type Tab = "home" | "profile"
// template: tab- followed by Tab => "tab-home" | "tab-profile"
function selectTab(id: "tab-home" | "tab-profile") { return id }
console.log(selectTab("tab-home"))حافظ على سهولة قراءتها
على الرغم من قوتها، تضر أنواع القوالب المتداخلة بعمق بسهولة القراءة. سمِّ أسماء الأنواع المستعارة الوسيطة حتى تبقى البنية واضحة للقارئ التالي.
type Entity = "user" | "order"
// type EventName = on + Capitalize<Entity> + Created
// e.g. "onUserCreated" | "onOrderCreated"
const e: "onUserCreated" | "onOrderCreated" = "onUserCreated"
console.log(e)تحقق سريع
اختبر مدى فهمك لنمذجة السلاسل النصية المهيكلة.
مراجعة
تنمذج أنواع القوالب الحرفية السلاسل النصية المهيكلة — مثل أسماء المعالجات (on + Capitalize لحدث)، ومسارات التوجيه، ومتغيرات CSS — وتفرض هذه التنسيقات في وقت الترجمة. وبالاقتران مع الأنواع المعيّنة، تنشئ خرائط للمعالجات، ومع الأنواع الشرطية وinfer تحلل السلاسل النصية. سمِّ الأسماء المستعارة الوسيطة للحفاظ على سهولة قراءة الأنماط المعقدة.
الأسئلة الشائعة
هل درس «نمذجة السلاسل المهيكلة» مجاني؟
نعم — نص درس «نمذجة السلاسل المهيكلة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة TypeScript Academy، انتقل إلى CoddyKit PRO. تتضمن دورة TypeScript Academy 4 دروس في المجموع.
ماذا ستتعلم في «نمذجة السلاسل المهيكلة»؟
أَلزموا بتنسيقات مثل أسماء الأحداث ومسارات التوجيه تتمرن على TypeScript Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ TypeScript Academy؟
لا تُشترط خبرة سابقة. TypeScript Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «نمذجة السلاسل المهيكلة»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس TypeScript Academy هذا؟
نعم. كل درس في TypeScript Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- أساسيات الأنواع الحرفية للقوالب النصية
- نمذجة السلاسل المهيكلة
- اتحادات السلاسل والإكمال التلقائي
- أنواع معالجة السلاسل المضمّنة