本文へスキップ
ToolMug

JSON → TypeScript 型 変換ツール

API レスポンス、設定ファイル、テスト用データなどの JSON のサンプルを、コードにそのまま貼り付けられる TypeScript の interface に変換します。ネストしたオブジェクトには名前付きの型が個別に作られ、配列の要素ごとの違いは省略可能なプロパティやユニオン型になります。

ブラウザ内で動作 — 入力した内容はアップロードされません

使い方

  1. JSON のサンプルを貼り付けるか、「サンプルを読み込む」をクリックします。
  2. ルート型の名前を設定します。
  3. interface にするか type エイリアスにするかを選びます。
  4. 生成された型をコピーまたはダウンロードします。

オプションの説明

ルート型の名前
最上位の型の名前です(例:User、ApiResponse)。ネストした型はキーの名前から命名されます。address は Address に、posts の要素は Post になります。
interface ではなく type を使う
interface の代わりに type エイリアス(type User = { … })を生成します。単純なデータであれば、どちらも同じように機能します。

例

{"id": 1, "tags": ["a"], "owner": {"name": "Ada"}} は次のようになります:

export interface Owner {
  name: string;
}

export interface Root {
  id: number;
  tags: string[];
  owner: Owner;
}

よくある質問

オブジェクトの配列はどう扱われますか?

すべての要素が 1 つの型にマージされます。一部の要素にしかないキーは省略可能(key?)になり、null になることがある値は string | null のようなユニオン型になります。

フィールドの型が unknown になるのはなぜですか?

サンプルではそのフィールドの値が null しかなかったため、本当の型を推測できません。unknown を正しい型に置き換えるか、そのフィールドに値が入っているサンプルを貼り付けてください。

整数と小数は別の型になりますか?

TypeScript ではなりません。どちらも number になります。Go、Rust、Python の出力では区別されます。

JSON はアップロードされますか?

いいえ。型はブラウザ内で生成されるため、実データを含む API レスポンスも端末の外に出ません。

プライバシー

このツールはすべてブラウザ内で動作します。ファイルやテキストはお使いの端末上で処理され、当サイトのサーバーにアップロードされることはありません。

関連ツール