TypeScript 型別系統實戰

TypeScript 的型別系統是一個完整的型別語言（Type Language），善用它能讓編譯器幫你抓到大多數的 Bug。

Generics 實用技巧

泛型約束

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}
const user = { name: 'Alice', age: 30 };
const name = getProperty(user, 'name'); // string

預設泛型參數

interface ApiResponse<T = unknown> {
  success: boolean;
  data: T;
  error?: string;
}

Conditional Types

type IsString<T> = T extends string ? true : false;
type Unpacked<T> = T extends (infer U)[] ? U : T extends Promise<infer U> ? U : T;
type C = Unpacked<string[]>;    // string
type D = Unpacked<Promise<number>>; // number

Template Literal Types

type EventName<T extends string> = `on${Capitalize<T>}`;
type ClickEvent = EventName<'click'>; // 'onClick'

推薦的 tsconfig 設定

{
  "compilerOptions": {
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "noImplicitOverride": true
  }
}