typescript

TypeScript のベストプラクティス

TypeScript アプリケーション向けの包括的なパフォーマンス最適化ガイドです。8 つのカテゴリにわたる 45 のルールを収録し、影響度の高い順に並べて、自動リファクタリングとコード生成を支援します。

適用するタイミング

次のような場合に、これらのガイドラインを参照してください。

• 新規または既存のプロジェクトで tsconfig.json を設定するとき
• 複雑な型定義やジェネリクスを記述するとき
• async/await パターンやデータ取得を最適化するとき
• モジュールを整理し、インポートを管理するとき
• コンパイルまたは実行時のパフォーマンスを考慮してコードをレビューするとき

優先度別のルールカテゴリ

優先度	カテゴリ	影響度	プレフィックス
1	型システムのパフォーマンス	CRITICAL	type-
2	コンパイラの設定	CRITICAL	tscfg-
3	非同期パターン	HIGH	async-
4	モジュールの整理	HIGH	module-
5	型安全性のパターン	MEDIUM-HIGH	safety-
6	メモリ管理	MEDIUM	mem-
7	実行時の最適化	LOW-MEDIUM	runtime-
8	高度なパターン	LOW	advanced-

目次

1. 型システムのパフォーマンス — CRITICAL
   • 1.1 エクスポートされた関数に明示的な戻り値の型を追加する — CRITICAL（宣言の出力が30〜50%高速化）
   • 1.2 深くネストしたジェネリック型を避ける — CRITICAL（インスタンス化コストの指数的な増加を防止）
   • 1.3 大規模なユニオン型を避ける — CRITICAL（比較コストが二次的に増加：O(n²)）
   • 1.4 条件型を名前付きエイリアスに抽出する — CRITICAL（コンパイラーのキャッシュを有効にし、再評価を防止）
   • 1.5 型の再帰の深さを制限する — HIGH（該当する場合に型の指数的な展開を防止）
   • 1.6 型の交差よりインターフェースを優先する — CRITICAL（型解決が2〜5倍高速化）
   • 1.7 複雑なマップ型を簡素化する — HIGH（該当する場合に型の計算量を50〜80%削減）
2. コンパイラーの設定 — CRITICAL
   • 2.1 include と exclude を適切に設定する — CRITICAL（不要なファイル数千件のスキャンを防止）
   • 2.2 インクリメンタルコンパイルを有効にする — CRITICAL（再ビルドが50〜90%高速化）
   • 2.3 並列宣言出力のために isolatedDeclarations を有効にする — CRITICAL（型チェッカーなしでの並列 .d.ts 生成を有効化）
   • 2.4 ビルドを高速化するために skipLibCheck を有効にする — CRITICAL（コンパイルが20〜40%高速化）
   • 2.5 分散チェックを高速化するために strictFunctionTypes を有効にする — CRITICAL（最適化された分散チェックを有効化）
   • 2.6 Node.js ネイティブ TypeScript に erasableSyntaxOnly を使用する — HIGH（Node.js で型を除去する際の実行時エラーを100%防止）
   • 2.7 単一ファイルのトランスパイルに isolatedModules を使用する — CRITICAL（バンドラー使用時のトランスパイルが80〜90%高速化）
   • 2.8 大規模なコードベースでプロジェクト参照を使用する — CRITICAL（インクリメンタルビルドが60〜80%高速化）
3. 非同期パターン — HIGH
   • 3.1 非同期関数の戻り値の型を注釈する — HIGH（実行時エラーを防止し、型推論を改善）
   • 3.2 ループ内で await を避ける — HIGH（N 回の反復で N 倍高速化。ユーザー10人なら10倍の改善）
   • 3.3 不要な async/await を避ける — HIGH（不要な Promise ラッパーをなくし、スタックトレースを改善）
   • 3.4 値が必要になるまで await を遅らせる — HIGH（暗黙的な並列化が可能）
   • 3.5 独立した処理に Promise.all を使用する — HIGH（I/O がボトルネックのコードで2〜10倍改善）
4. モジュールの構成 — HIGH
   • 4.1 バレルファイルからのインポートを避ける — HIGH（インポートに200〜800ミリ秒かかり、バンドルが30〜50%大きくなる）
   • 4.2 循環依存を避ける — HIGH（実行時の undefined エラーとコンパイルの遅延を防止）
   • 4.3 @types パッケージの読み込みを制御する — HIGH（型の競合を防ぎ、メモリ使用量を削減）
   • 4.4 大規模なモジュールに動的インポートを使用する — HIGH（初期バンドルを30〜70%削減）
   • 4.5 型に型専用インポートを使用する — HIGH（型情報の実行時インポートをなくす）
5. 型安全性のパターン — MEDIUM-HIGH
   • 5.1 noUncheckedIndexedAccess を有効にする — MEDIUM-HIGH（チェックされていないインデックスアクセスのエラーをコンパイル時に100%防止）
   • 5.2 strictNullChecks を有効にする — MEDIUM-HIGH（null／undefined による実行時エラーを防止）
   • 5.3 any より unknown を優先する — MEDIUM-HIGH（型の絞り込みを強制し、実行時エラーを防止）
   • 5.4 検証にアサーション関数を使用する — MEDIUM-HIGH（検証の定型コードを50〜70%削減）
   • 5.5 リテラル型に const アサーションを使用する — MEDIUM-HIGH（リテラル型を保持し、より優れた型推論を可能にする）
   • 5.6 ユニオン型に網羅性チェックを使用する — MEDIUM-HIGH（ケースの欠落によるエラーをコンパイル時に100%防止）
   • 5.7 実行時の型チェックに型ガードを使用する — MEDIUM-HIGH（型アサーションをなくし、境界でエラーを検出）
6. メモリ管理 — MEDIUM
   • 6.1 クロージャーによるメモリーリークを避ける — MEDIUM（長期間存続するコールバックでの参照の保持を防止）
   • 6.2 グローバル状態の蓄積を避ける — MEDIUM（メモリーの無制限な増加を防止）
   • 6.3 イベントリスナーをクリーンアップする — MEDIUM（メモリーの無制限な増加を防止）
   • 6.4 タイマーとインターバルをクリアする — MEDIUM（コールバックの保持と繰り返し実行を防止）
   • 6.5 オブジェクトのメタデータに WeakMap を使用する — MEDIUM（メモリーリークを防ぎ、自動クリーンアップを可能にする）
7. 実行時の最適化 — LOW-MEDIUM
   • 7.1 ホットループでのオブジェクトスプレッドを避ける — LOW-MEDIUM（オブジェクトの割り当てを N 倍削減）
   • 7.2 ループ内のプロパティアクセスをキャッシュする — LOW-MEDIUM（ホットパスでのプロパティ検索を N 倍削減）
   • 7.3 Lodash よりネイティブの配列メソッドを優先する — LOW-MEDIUM（ライブラリーのオーバーヘッドをなくし、ツリーシェイキングを可能にする）
   • 7.4 単純な反復処理には for-of を使用する — LOW-MEDIUM（反復処理の定型コードを30〜50%削減）
   • 7.5 最新の文字列メソッドを使用する — LOW-MEDIUM（単純なパターンでは正規表現より2〜5倍高速）
   • 7.6 O(1) の検索に Set／Map を使用する — LOW-MEDIUM（検索ごとの計算量を O(n) から O(1) に削減）
8. 高度なパターン — LOW
   • 8.1 型安全な ID にブランド型を使用する — LOW（互換性のない ID 型の混同を防止）
   • 8.2 型検証と型推論に satisfies を使用する — LOW（プロパティアクセスエラーを防ぎ、オートコンプリートの精度を100%にする）
   • 8.3 文字列パターンにテンプレートリテラル型を使用する — LOW（文字列形式のエラーをコンパイル時に100%防止）

References

1. https://github.com/microsoft/TypeScript/wiki/Performance
2. https://www.typescriptlang.org/docs/handbook/
3. https://v8.dev/blog
4. https://nodejs.org/en/learn/diagnostics/memory