5 أنماط TypeScript متقدمة للمهندسين الكبار

أصبحت TypeScript معيار الصناعة لتطوير الويب على نطاق واسع. بينما يعرف معظم المطورين أساسيات الواجهات والأنواع، تكمن القوة الحقيقية في نظام الأنواع المتقدم الخاص بها. إليك 5 أنماط ستميزك كمهندس كبير.

1. القيود العامة (Generic Constraints)

العموميات قوية، لكن في بعض الأحيان تحتاج إلى تقييد ما يمكن تمريره. extends هو صديقك هنا.

interface HasId {
  id: string;
}

function getById<T extends HasId>(list: T[], id: string): T | undefined {
  return list.find((item) => item.id === id);
}

من خلال ضمان أن T يمتد HasId، نضمن أن الوصول إلى .id داخل الوظيفة آمن.

2. الأنواع الشرطية (Conditional Types)

تسمح لك الأنواع الشرطية بإنشاء تعيينات أنواع غير موحدة. بناء الجملة مشابه للمشغل الثلاثي في JavaScript.

type IsString<T> = T extends string ? true : false;

type A = IsString<string>; // true
type B = IsString<number>; // false

حالة استخدام عملية هي تصفية الأنواع من اتحاد:

type Diff<T, U> = T extends U ? never : T;
type NonNullable<T> = Diff<T, null | undefined>;

3. الأنواع المعينة (Mapped Types)

تسمح لك الأنواع المعينة بإنشاء أنواع جديدة بناءً على الأنواع القديمة عن طريق تحويل الخصائص.

type ReadOnly<T> = {
  readonly [P in keyof T]: T[P];
};

interface User {
  name: string;
  age: number;
}

type ReadOnlyUser = ReadOnly<User>;

يمكنك حتى إضافة أو إزالة المعدلات:

type Mutable<T> = {
  -readonly [P in keyof T]: T[P];
};

4. أنواع القوالب الحرفية (Template Literal Types)

تم تقديم هذه في TypeScript 4.1، وهي تسمح لك بمعالجة أنواع السلاسل مباشرة.

type World = 'world';
type Greeting = `hello ${World}`; // "hello world"

type Color = 'red' | 'blue';
type Quantity = 'light' | 'dark';

type Palette = `${Quantity}-${Color}`;
// "light-red" | "light-blue" | "dark-red" | "dark-blue"

هذا مفيد بشكل لا يصدق لكتابة السلاسل التي تتبع نمطًا معينًا، مثل فئات CSS أو أسماء الأحداث.

5. الكلمة الأساسية infer

تسمح لك الكلمة الأساسية infer داخل الأنواع الشرطية باستخراج الأنواع من أنواع أخرى.

type ReturnType<T> = T extends (...args: any[]) => infer R ? R : any;

function check(): boolean {
  return true;
}

type CheckReturn = ReturnType<typeof check>; // boolean

هنا، نطلب من TypeScript "استنتاج" نوع الإرجاع R لوظيفة وإعادته.

الخاتمة

يسمح لك إتقان هذه الأنماط بكتابة مكتبات وأدوات قوية وتوفر تجربة مطور ممتازة (DX). الهدف من TypeScript المتقدم ليس التعقيد من أجل التعقيد، بل الأمان والتعبير.