ガイド記事 · 6 分で読む
真実を伝える JSON から TypeScript タイプを生成する
JSON から TypeScript へのステップは、通常、API 応答をエディタにコピーし、インターフェイスを手書きすることから始まります。これは大きなリスクを隠した小さな作業です。作成するタイプは、ユーザーがトリガーする応答ではなく、表示された 1 つの応答を説明します。
更新されました
JSON ~ TypeScript: 幸運なペイロードではなく、代表的なペイロードから開始します
ジェネレーターは、サンプルが示しているものを推測することしかできません。厄介なケース、つまりオプションのフィールドが存在するレコードと存在しないレコード、null、空の配列、10 進数を含む応答を取得します。 1 つの良好なサンプルは 5 つのクリーンなサンプルに勝ります。
オプションのフィールドは配列から取得されます
単一のオブジェクトを指定すると、すべてのキーが必要であるように見えます。オブジェクトの配列が与えられると、ジェネレーターは項目を比較できます。一部の項目に欠落しているキーはオプション (key?: string) ですが、どこにでも存在するキーは必須です。これが、レコードのリストを貼り付ける方が、1 つのレコードを貼り付けるよりも劇的に優れた型を生成する理由です。
正直にヌルをモデル化する
// One sample with "deleted_at": null and one with a date
interface User {
id: number;
deleted_at: string | null; // not string, not optional
}
nullと未定義は別のものです。 NULL 値を許容するフィールドが NULL 値で存在します。オプションのフィールドが完全に存在しない場合があります。この 2 つを折りたたむジェネレーターは、間違ったまま型チェックを行うインターフェイスを生成します。これは、コンパイラーが警告を停止するため、最も高価な種類の間違いです。
労働組合はどこにも負けない
フィールドが、あるレコードでは文字列であり、別のレコードでは数値である場合 (乱雑な API が存在します)、正直な型は string | です。番号。 [任意] または [不明] にフォールバックすると、コンパイラが沈黙し、失敗が運用環境にプッシュされます。組合を報告するジェネレーターは少なくとも現実を文書化しているため、API チームに理由を尋ねることができます。
型はコンパイル時に決まります。実行時に検証する
- TypeScript は実行時に消えます。インターフェイスが禁止している形式で不正なペイロードが到着することを阻止するものは何もありません。
- 生成された型を使用して期待するものを記述し、データがアプリに入る境界でランタイムバリデーター (Zod、Valibot、または AJV を使用した JSON スキーマ) を使用します。
- 同じサンプルから JSON スキーマを生成すると、ランタイムの半分、つまりスキーマの検証とインターフェイスのドキュメントが得られます。
型を再入力せずに再生成したままにする
手書きのタイプは API からずれます。ジェネレーターをワークフローのステップとして扱います。新しい応答を貼り付け、再生成して、タイプ ファイルに貼り付け、コンパイラーに API が変更されたすべての場所を表示させます。これは、存在する中で最も安価な 2 ドリフト検出器であり、所要時間は 30 秒です。
JSON から TypeScript ジェネレータで試してみてください。インターフェイスまたは型出力、オプションのキーが検出され、共用体が保持されます。