typescript-advanced-patterns

TypeScript の高度なパターン

高度な型推論、コンパイル時の保証、保守しやすいドメインモデルを備えた堅牢で型安全なアプリケーションを構築するため、TypeScript の高度な型システム機能を活用するエキスパート向けのガイダンスです。

このスキルを使用する場面

• 厳密なコントラクトと検証を備えた型安全な API の構築
• コンパイル時の強制を伴う複雑なドメインモデルの実装
• 高度な型推論を備えた再利用可能なライブラリの作成
• 型システムによるビジネスルールの強制
• 型安全なステートマシンやビルダーの構築
• 高度な型を必要とするフレームワーク統合の開発
• 型レベルの保証を伴うランタイム検証の実装

コア概念

TypeScript の型システムは、次の機能によってコンパイル時の安全性を実現します。

1. 条件型：条件に基づく型の選択（型レベルの if/else）
2. マップ型：オブジェクト型を体系的に変換（Partial、Readonly、Pick、Omit）
3. テンプレートリテラル型：コンパイル時の文字列操作
4. 型ガード：型の絞り込みを伴うランタイムチェック（value is Type）
5. 判別可能なユニオン：網羅性チェックを備えた型安全なステートマシン
6. ブランド型：プリミティブ型の混同を防ぐ公称型
7. ビルダーパターン：段階的な型制約を備えた型安全な流れるように書ける API
8. 高度なジェネリクス：制約、推論、高カインド型のパターン
9. ユーティリティ型：深い変換と合成
10. 型推論：const アサーションとコンテキスト型付け

クイックリファレンス

必要に応じて詳細なリファレンスを読み込みます。

トピック	リファレンスファイル
条件型	skills/typescript-advanced-patterns/references/conditional-types.md
マップ型	skills/typescript-advanced-patterns/references/mapped-types.md
テンプレートリテラル型	skills/typescript-advanced-patterns/references/template-literal-types.md
型ガード	skills/typescript-advanced-patterns/references/type-guards.md
判別可能なユニオン	skills/typescript-advanced-patterns/references/discriminated-unions.md
ブランド型	skills/typescript-advanced-patterns/references/branded-types.md
ビルダーパターン	skills/typescript-advanced-patterns/references/builder-pattern.md
高度なジェネリクス	skills/typescript-advanced-patterns/references/advanced-generics.md
ユーティリティ型	skills/typescript-advanced-patterns/references/utility-types.md
型推論	skills/typescript-advanced-patterns/references/type-inference.md
デコレーター	skills/typescript-advanced-patterns/references/decorators.md
パフォーマンスのベストプラクティス	skills/typescript-advanced-patterns/references/performance-best-practices.md
よくある落とし穴	skills/typescript-advanced-patterns/references/common-pitfalls.md
型のテスト	skills/typescript-advanced-patterns/references/testing-types.md

実装ワークフロー

1. 必要なパターンを特定する

• 型安全性の要件を分析します
• ランタイムとコンパイル時の制約を特定します
• クイックリファレンスから適切なパターンを選びます

2. リファレンスを読み込む

• パターンに対応するリファレンスファイルを読みます
• 例とユースケースを確認します
• トレードオフを理解します

3. パターンを実装する

• シンプルな状態から始め、必要に応じて複雑さを加えます
• strict モードを使用します（tsconfig.json で "strict": true を指定）
• 型アサーションを使ってテストします

4. 検証する

• コンパイル時に型エラーが検出されることを確認します
• ランタイムの動作が型と一致することを検証します
• パフォーマンスを確認します（型の過度な複雑化を避けます）

5. ドキュメントを作成する

• 公開 API に JSDoc コメントを追加します
• 型の制約と前提条件を記載します
• 使用例を示します

よくある避けるべきミス

1. unknown ではなく any を使う：型安全性がすべて失われます

   • 代わりに unknown と型ガードを使います

2. 検証せずに型アサーションを使う：実行時に安全でない動作が発生します

   • as Type よりも型ガード（value is Type）を優先します

3. ジェネリクスを使いすぎる：不要な複雑さにつながります

   • 型が実際に変化する場合にのみジェネリクスを使います

4. 型を深くネストする：コンパイルが遅くなり、デバッグが困難になります

   • 型は合成可能で浅く保ちます

5. readonly を忘れる：意図しない変更が発生します

   • 不変のデータ構造には readonly を指定します

6. strict モードを有効にしない：null チェックや型エラーの検出が不十分になります

   • 常に tsconfig.json で "strict": true を使います

7. type と interface を誤って使い分ける：意味が分かりにくくなります

   • 共用体やユーティリティには type を、オブジェクトの形状には interface を使います

よく使うパターン

型安全な ID

type UserId = string & { readonly __brand: 'UserId' };
function createUserId(id: string): UserId { return id as UserId; }

判別可能な共用体

type State =
  | { status: 'loading' }
  | { status: 'success'; data: string }
  | { status: 'error'; error: Error };

マップ型変換

type Readonly<T> = { readonly [P in keyof T]: T[P] };
type Partial<T> = { [P in keyof T]?: T[P] };

型ガード

function isString(value: unknown): value is string {
  return typeof value === 'string';
}

リソース

• TypeScript Handbook：https://www.typescriptlang.org/docs/handbook/
• Type Challenges：https://github.com/type-challenges/type-challenges
• ts-toolbelt：高度な型ユーティリティライブラリ
• zod：TypeScript の型推論を利用した実行時検証
• tsd：TypeScript の型定義をテストするツール