أنواع السلاسل القالبية: سلاسل مَحسوبة وقت التصريف

استثمِر أنواع السلاسل القالبية لتوليد اتّحادات عبر الجداءات الديكارتية وتحليل السلاسل الحرفية بواسطة infer.

9 دقيقة · 3 أسئلة

تُدخِل أنواع السلاسل القالبية بناء السلاسل القالبية إلى عالم الأنواع. أدرِج اتّحاداً بالاستيفاء فيحسب المُصرِّف الجداء الديكارتي: يصبح كل تركيب ممكن عضواً في النتيجة. إنها الأداة التي تُتيح لك تصنيف مفاتيح الأحداث أو المسارات أو رموز نظام التصميم حتى الحرف الدقيق.

type Lang = "fr" | "en";
type Theme = "light" | "dark";

type ThemeKey = `${Lang}-${Theme}`;
// "fr-light" | "fr-dark" | "en-light" | "en-dark"

تظهر القوّة الحقيقية عند الدمج مع infer: يصبح نوع السلسلة القالبية نمط مطابقة على السلاسل. يُقطِّع المُصرِّف السلسلة الحرفية المُدخَلة ليطابق كل مقطع؛ وعندما تتعدّد التقسيمات الممكنة، يفوز أول ورود للفاصل. أضِف الاستدعاء الذاتي فتحصل على مُحلِّلات حقيقية تُقيَّم وقت التصريف.

type Split<S extends string, Sep extends string> =
  S extends `${infer Head}${Sep}${infer Rest}`
    ? [Head, ...Split<Rest, Sep>]
    : [S];

type Parts = Split<"a.b.c", ".">;
// ["a", "b", "c"]

يتألّق هذا النمط عند استخراج بارامترات مسار على طراز Express. يستهلك كل استدعاء ذاتي مقطع :param واحداً، ويُعدِّد الاتّحاد النهائي كل اسم بارامتر، ويمكنك بعدها تمريره إلى Record لتصنيف توقيع المُعالِج.

type Params<Path extends string> =
  Path extends `${string}:${infer P}/${infer Rest}`
    ? P | Params<Rest>
    : Path extends `${string}:${infer P}`
      ? P
      : never;

type RouteParams = Params<"/users/:id/posts/:postId">;
// "id" | "postId"

يأتي TypeScript بأربع أدوات جوهرية (intrinsic) - Uppercase وLowercase وCapitalize وUncapitalize - مُنفَّذة مباشرة داخل المُصرِّف (الكلمة المفتاحية intrinsic)، فلا يمكنك إعادة كتابتها بنفسك. نمط إنتاجي آخر: string & {}. في اتّحاد، سيمتصّ string القيم الحرفية ويفقد المحرِّر الإكمال التلقائي؛ أمّا التقاطع مع {} فيُنشئ نوعاً مكافئاً لكن مميّزاً لا يُبسّطه المُصرِّف.

type Method = "get" | "post";
type Handler = `on${Capitalize<Method>}`;
// "onGet" | "onPost"

type KnownColor = "red" | "green" | "blue";
type Color = KnownColor | (string & {});

declare function paint(color: Color): void;

paint("red");     // suggested by autocompletion
paint("#ff8800"); // also accepted

اختبار المعرفة

تأكّد من أنك تذكّرت النقاط الأساسية في هذا الدرس.

1. إذا كان لـA ثلاثة أعضاء ولـB أربعة، فكم عضواً يحتوي ${A}-${B}؟
   • 7
   • 12
   • 1
   • 4
2. ماذا يُنتج Capitalize عند تطبيقه على القيمة الحرفية "hello world"؟
   • "Hello World"
   • "Hello world"
   • "HELLO WORLD"
3. لماذا تكتب KnownColor | (string & {}) بدلاً من KnownColor | string؟
   • لمنع السلاسل خارج KnownColor
   • لمنع string من امتصاص القيم الحرفية والحفاظ على الإكمال التلقائي
   • لتحسين أداء المُصرِّف
   • الصيغتان متكافئتان تماماً