Featured image of post 在 TypeScript 5 系列中練習的類型安全編碼技術Featured image of post 在 TypeScript 5 系列中練習的類型安全編碼技術

在 TypeScript 5 系列中練習的類型安全編碼技術

TypeScript 5.x時代所需的型別設計哲學

TypeScript 5 系列引入了許多新功能,可以在不影響開發人員體驗的情況下最大限度地提高類型推斷的準確性。依賴過多類型斷言 (as) 的程式碼是執行時期錯誤的滋生地。有了型系統在您身邊,我們將解釋實用技術,自然地縮小您的型。


1. const 類型參數:更聰明的文字類型推斷

以前,如果您想在函數參數中保留文字類型,則必須在呼叫方添加“as const”。 TypeScript 5.0 的 const 類型參數可讓您在函數定義端強制進行文字推理。

// 呼び出し側の as const なしで厳密なリテラル配列として推論
function createRoutes<const T extends readonly string[]>(routes: T): T {
  return routes;
}
const routes = createRoutes(['/home', '/dashboard']);

作為參數傳遞的陣列和物件不會被擴展,並且安全地推斷為精確的元組或文字。

2. satisfies 運算子:類型相容性驗證和推理的兼容性

satisfies 解決了新增類型註解會導致屬性的特定類型資訊遺失,而刪除它會導致驗證失敗的困境。

type Palette = Record<string, string | number[]>;
const theme = {
  primary: '#0066cc',
  rgb: [0, 102, 204],
} satisfies Palette;

// 型制約を満たしつつ、個別プロパティの型が完全保持される
theme.primary.toUpperCase(); // string型メソッドが安全に呼出可能

3. 具有範本文字類型的事件中心

type Event = 'click' | 'focus';
type HandlerMap = { [K in `on${Capitalize<Event>}`]?: () => void };

在類型層級強制執行字串連接規則,並在建置時防止事件名稱 100% 出現拼字錯誤。


反模式:應在該領域根除的“任何”

使用“as any”作為解決類型錯誤的快速方法是放棄 TypeScript 優勢的糟糕方法。使用類型保護函數(“is”運算符)和模式驗證器(例如 Zod)在運行時邊界安全地縮小類型範圍。