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 מתקדם אינה מורכבות לשם מורכבות, אלא בטיחות וכושר ביטוי.