5 Corak TypeScript Lanjutan untuk Jurutera Kanan

TypeScript telah menjadi standard industri untuk pembangunan web berskala besar. Walaupun kebanyakan pembangun mengetahui asas interfaces dan types, kuasa sebenar terletak pada sistem jenis lanjutannya. Berikut adalah 5 corak yang akan membezakan anda sebagai jurutera kanan.

1. Generic Constraints

Generics adalah berkuasa, tetapi kadang-kadang anda perlu mengehadkan apa yang boleh dihantar masuk. extends adalah rakan anda di sini.

interface HasId {
  id: string;
}

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

Dengan memastikan T memanjangkan HasId, kita menjamin bahawa mengakses .id di dalam fungsi adalah selamat.

2. Conditional Types

Conditional Types membolehkan anda mencipta pemetaan jenis yang tidak seragam. Sintaksnya serupa dengan operator ternari dalam JavaScript.

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

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

Kes penggunaan praktikal ialah menapis jenis daripada union:

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

3. Mapped Types

Mapped Types membolehkan anda mencipta jenis baharu berdasarkan jenis lama dengan mengubah sifat.

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

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

type ReadOnlyUser = ReadOnly<User>;

Anda juga boleh menambah atau mengalih keluar pengubah suai:

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

4. Template Literal Types

Diperkenalkan dalam TypeScript 4.1, ini membolehkan anda memanipulasi jenis rentetan secara langsung.

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"

Ini sangat berguna untuk menaip rentetan yang mengikuti corak tertentu, seperti kelas CSS atau nama peristiwa.

5. Kata Kunci infer

Kata kunci infer dalam conditional types membolehkan anda mengekstrak jenis daripada jenis lain.

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

function check(): boolean {
  return true;
}

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

Di sini, kita meminta TypeScript untuk "menyimpul" jenis pulangan R bagi sesuatu fungsi dan mengembalikannya.

Kesimpulan

Menguasai corak-corak ini membolehkan anda menulis pustaka dan utiliti yang mantap dan memberikan pengalaman pembangun (DX) yang cemerlang. Matlamat TypeScript lanjutan bukan kerumitan demi kerumitan, tetapi keselamatan dan daya ekspresi.