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']);

引数に渡した配列やオブジェクトが widen されず、厳密なタプルやリテラルとして安全に推論されます。

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%防ぎます。


アンチパターン:現場で撲滅すべき「とりあえず any」

型エラーを手っ取り早く解消するための as any は、TypeScriptの恩恵を自ら放棄する悪手です。型ガード関数(is 演算子)や Zod 等のスキーマバリデータを活用し、実行時境界で安全に型を絞り込みましょう。