۵ الگوی پیشرفته TypeScript برای مهندسان ارشد

TypeScript به استاندارد صنعتی برای توسعه وب در مقیاس بزرگ تبدیل شده است. در حالی که بیشتر توسعه‌دهندگان اصول اولیه اینترفیس‌ها و تایپ‌ها را می‌دانند، قدرت واقعی در سیستم تایپ پیشرفته آن نهفته است. در اینجا ۵ الگو وجود دارد که شما را به عنوان یک مهندس ارشد متمایز می‌کند.

۱. Generic Constraints

Genericها قدرتمند هستند، اما گاهی اوقات باید آنچه را که می‌تواند ارسال شود محدود کنید. 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 در داخل تابع ایمن است.

۲. Conditional Types

Conditional Types به شما امکان ایجاد نگاشت‌های نوع غیر یکنواخت را می‌دهند. نحو آن مشابه عملگر سه‌گانه در JavaScript است.

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

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

یک مورد استفاده عملی فیلتر کردن تایپ‌ها از یک union است:

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

۳. Mapped Types

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];
};

۴. 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 یا نام رویدادها، بسیار مفید است.

۵. کلمه کلیدی infer

کلمه کلیدی infer در Conditional Types به شما امکان استخراج تایپ‌ها از تایپ‌های دیگر را می‌دهد.

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 پیشرفته پیچیدگی به خاطر پیچیدگی نیست، بلکه ایمنی و بیان‌گری است.