はじめに
「anyを使いすぎてTypeScriptの恩恵が受けられていない」
「型エラーが大量に出ていて、どこから直せばいいかわからない」
「ジェネリクスの設計が複雑になって理解できなくなってきた」
TypeScriptは型安全なコードを書くための強力なツールですが、適切な型設計を行うには深い知識が必要です。Claude Codeを使えば、型定義の自動生成から既存コードの型安全化まで、TypeScriptの専門知識を活かしたサポートが受けられます。
目次
- Claude CodeとTypeScript開発の相性
- 型定義の自動生成
- strictモードへの段階的移行
- ジェネリクスの設計
- 型安全なAPIクライアントの実装
- 高度な型パターンの活用
- 型テストの実装
- まとめ
1. Claude CodeとTypeScript開発の相性
TypeScript特有の課題をAIが解決
> このTypeScriptプロジェクトの型の問題点を診断してください。
確認項目：
- anyの使用箇所
- 型アサーション（as）の不適切な使用
- strictモードで発生する型エラー
- 型定義が不正確な箇所
- 再利用できるのに重複している型定義
問題を重大度順にリストアップして、修正方針を提案してください。2. 型定義の自動生成
APIレスポンスからの型生成
> 以下のAPIレスポンスからTypeScriptの型定義を生成してください。
zodスキーマも合わせて生成してください。
[JSONレスポンスを貼り付け]
要件：
- nullableなフィールドをT | nullで表現
- 日付文字列はstringではなくDateStringのブランド型を使う
- IDフィールドはstringではなくUserIdのようなブランド型を使うOpenAPIスキーマからの型生成
> openapi.yamlを読み込んで、すべてのエンドポイントの
TypeScript型定義を生成してください。
生成内容：
- リクエスト型（パスパラメータ・クエリパラメータ・ボディ）
- レスポンス型（成功・エラー）
- 型安全なAPIクライアント関数
出力先：src/types/api.tsデータベーススキーマからの型生成
> Prismaスキーマから型安全なリポジトリ層の型定義を生成してください。
要件：
- 各モデルのCreate・Update・Select型
- リレーションを含む型
- ページネーション型
- フィルタリング型
PrismaのPrismaClientよりも使いやすいRepository Patternで実装してください。3. strictモードへの段階的移行
エラーの影響範囲分析
> tsconfig.jsonにstrict: trueを追加した場合に
発生する型エラーを事前に確認してください。
ファイルごとのエラー数・エラーの種類を集計して、
修正の優先順位と工数見積もりを出してください。ファイルごとの段階的移行
> strictモードへの移行を以下の順番で進めてください。
方針：
1. 最もエラーが少ないユーティリティ関数から始める
2. ファイル単位で修正してコミットする
3. anyを使わずに正しい型で解決する
4. 各ファイル修正後にビルドとテストを実行する
まずsrc/utils/formatter.tsから始めてください。4. ジェネリクスの設計
汎用コンポーネントの型設計
> 以下の汎用コンポーネントに適切なジェネリクスを追加してください。
DataTableコンポーネント：
- 任意のデータ型の配列を受け取る
- カラム定義でデータ型のキーを型安全に指定できる
- ソート・フィルター・選択機能も型安全に
[現在のコンポーネントを貼り付け]型安全なイベントシステム
> 型安全なイベントエミッターを設計してください。
要件：
- イベント名とペイロード型の対応を型で保証
- 存在しないイベント名のSubscribeはコンパイルエラー
- ペイロードの型が自動的に推論される
TypeScript 5.xの新機能（satisfies・const型パラメータ等）を活用してください。5. 型安全なAPIクライアントの実装
fetchwrapperの型設計
> 型安全なAPIクライアントを実装してください。
要件：
- エンドポイントとレスポンス型の対応を型で保証
- リクエストパラメータの型チェック
- エラーレスポンスの型安全な処理
- Zodによるランタイムバリデーション
以下のような使い方ができる型定義を目指してください：
const user = await api.get('/users/:id', { params: { id: '123' } })
// userはUser型として推論される6. 高度な型パターンの活用
Discriminated Unionの活用
> このコードのエラーハンドリングをDiscriminated Unionで型安全にしてください。
現在：any型のエラーオブジェクトを使っている
目標：エラーの種類ごとに型を分けて、exhaustive checkを実現する
[対象のコードを貼り付け]Template Literal Typesの活用
> CSSクラス名の型安全な管理をTemplate Literal Typesで実装してください。
要件：
- Tailwindのクラス名を型で管理
- 存在しないクラス名を使うとコンパイルエラーになる
- バリアントの組み合わせを型安全に指定できる型レベルのバリデーション
> 以下の制約を型レベルで表現してください：
- 正の整数のみを受け取る型
- 0〜100の範囲の数値型
- 空文字列を受け取らないstring型
- ISO 8601形式の日付文字列型
ランタイムバリデーション（Zod）と型レベルバリデーションの両方を実装してください。7. 型テストの実装
型の正しさをテストする
> このユーティリティ型の型テストを実装してください。
使用ライブラリ：tsd または expect-type
テスト内容：
- 期待する型が正しく推論されるか
- 不正な型でコンパイルエラーになるか
- ジェネリクスのデフォルト型が正しいか
[型定義を貼り付け]8. まとめ
Claude CodeでのTypeScript型設計の効率化ポイント：
- APIレスポンスやDBスキーマから型定義を自動生成できる
- strictモードへの段階的移行を計画・実施できる
- 複雑なジェネリクス設計を相談・実装できる
- 型テストの自動生成で型の正しさを保証できる
TypeScript型設計の優先順位：
- anyの排除（strictNullChecksの有効化）
- 外部データのZodバリデーション追加
- ブランド型でIDや日付の混在を防ぐ
- ジェネリクスで型安全な汎用関数を設計
次回の第32回：Infrastructure as Codeを構築する方法では、TerraformとAWSをClaude Codeで自動設定する手順を解説します。
よくある質問（FAQ）
Q. anyを完全になくすことは現実的ですか？
A. ほとんどのケースで可能です。Claude Codeに「このanyを適切な型に置き換えてください」と依頼すると、unknownやジェネリクスを使った型安全な代替案を提案してくれます。外部ライブラリの型定義が不完全な場合は、型定義の拡張方法も提案します。
Q. TypeScript 5.xの新機能を使った型設計にも対応していますか？
A. はい。satisfies演算子・const型パラメータ・可変長タプルなど、最新のTypeScript機能を活用した型設計を提案してくれます。
この記事はClaude Code入門シリーズ（第4部）の第31回です。← 第30回：個人開発 ｜ 第32回：IaC・Terraform →
ご質問はお問い合わせページからお気軽にどうぞ。
