YamlBox

ガイド記事 · 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 ジェネレータで試してみてください。インターフェイスまたは型出力、オプションのキーが検出され、共用体が保持されます。