JSON文字列値からTypeScriptユニオン型を生成する

JSONからTypeScriptへの変換時に、文字列フィールドを文字列リテラルユニオン型に絞り込む方法を学びます。単なるstringを超えた型安全性を実現。

Type Refinements

詳細な説明

単なるStringからリテラルユニオンへ

単純なstring型は多くの場合、広すぎます。JSONフィールドが固定の値セットのみを取る場合、文字列リテラルユニオンに変換する方がはるかに正確です。

JSON例

[
  { "id": 1, "status": "active" },
  { "id": 2, "status": "inactive" },
  { "id": 3, "status": "pending" }
]

生成されるTypeScript

interface Account {
  id: number;
  status: "active" | "inactive" | "pending";
}

コンバーターのユニオン検出方法

ツールは指定されたキーのすべての配列要素にわたる個別の文字列値を調べます。一意な値の数が設定可能な閾値(通常10-20)未満の場合、stringの代わりにリテラルユニオンを生成します。このヒューリスティックにより、自由テキストフィールドから不合理なユニオンが生成されることを防ぎます。

リテラルユニオンの利点

  1. 網羅性チェックstatusに対するswitch文で、ケースの漏れが警告されます。
  2. オートコンプリート — エディタがフィールド代入時に"active""inactive""pending"を提案します。
  3. リファクタリング安全性 — ステータス値の名前変更が使用されているすべての場所でコンパイルエラーを引き起こします。

ユニオンの抽出

ユニオンをスタンドアロン型として抽出することもできます:

type AccountStatus = "active" | "inactive" | "pending";

interface Account {
  id: number;
  status: AccountStatus;
}

これは同じ値セットが複数のinterfaceに出現する場合(例:AccountAuditLogNotificationAccountStatus)に特に有用です。

ユニオンを使用しない場合

フィールドがユーザー提供テキスト(名前、説明、コメント)を受け入れる場合は、stringのままにしてください。リテラルユニオンは列挙された閉じた値セットのみに使用します。

ユースケース

注文ステータスを表示するダッシュボードを構築し、UIコードがすべての可能なステータス値を処理することをコンパイル時に保証したい場合に使用します。

試してみる — JSON to TypeScript

フルツールを開く