DevTools Japan トップへ

JSON → TypeScript 型生成

JSONサンプルからinterface / typeを自動生成

オプション

JSON を貼り付け

生成された TypeScript

// ここに生成結果が表示されます
すべての処理はお使いのブラウザ内(クライアントサイド)で完結し、入力したJSONが外部サーバーに送信されることはありません。型は1つのサンプルJSONから推論されるため、実データの網羅性に応じて生成後に手直しが必要な場合があります。

JSON → TypeScript 型生成ツールの使い方

APIのレスポンスや設定ファイルなどのJSONサンプルを貼り付けるだけで、対応するTypeScriptの型定義(interface または type)を自動生成する無料ツールです。ネストしたオブジェクト、配列、オプショナルなプロパティ、ユニオン型までを再帰的に推論するため、手作業で型を書き起こす時間を大幅に短縮できます。インストールや会員登録は不要で、入力したJSONは外部に送信されず、すべてブラウザ内で処理されます。

使い方はかんたんです。上部のテキストエリアにJSONを貼り付けると、その場でTypeScriptの型が生成されます。ルート(最上位)の型名はデフォルトで「Root」ですが、任意の名前に変更できます。出力形式を interface / type で切り替えたり、すべてのプロパティに readonly を付けたり、値が null のプロパティを任意(?)扱いにしたりといったオプションも用意しています。生成結果は「コピー」ボタンでクリップボードにコピーして、そのままエディタに貼り付けられます。

型はどのように推論されるか

各プロパティの型は値から推論します。文字列は string、数値は number、真偽値は boolean、null は null になります。オブジェクトはネストの階層ごとに別の型として切り出し、親の型名にプロパティ名(PascalCase)を連結した名前を付けます。たとえば Root の address プロパティは RootAddress、その中の geo は RootAddressGeo という型になります。配列は要素の型を調べ、要素がオブジェクトなら要素用の型を生成して 型名[] の形に、要素の型が複数あれば (A | B)[] のようなユニオン配列にします。空配列は any[] として出力します。

オプショナル・ユニオン型の判定

オブジェクトの配列を型にする場合、要素ごとにキーが異なることがあります。本ツールでは、すべての要素に共通して存在するキーを必須、一部の要素にしか存在しないキーをオプショナル(?付き)として扱います。これにより、実際のデータのばらつきを反映した実用的な型を得られます。

JSONの値生成されるTypeScript型説明
"hello"string文字列は常に string
42 / 3.14number整数・小数の区別なく number
true / falseboolean真偽値
nullnull他に値の型が分かる場合は type | null
["a","b"]string[]要素の型で配列化
[]any[]空配列は要素型が不明
[1,"a"](number | string)[]混在配列はユニオン配列
{ "a": 1 }RootA などネストオブジェクトは別interface

こんな場面に

外部APIのJSONレスポンスに合わせた型を素早く用意したいとき、既存のJSON設定ファイルに型を付けたいとき、モックデータから開発用の型を起こしたいときなどに便利です。CSVやJSONの相互変換だけでなく、型定義の生成までブラウザ内で完結できます。生成された型は開発時の静的チェック用であり、実行時のバリデーションが必要な場合は zod などのスキーマライブラリと併用してください。

よくある質問

JSONからTypeScriptの型を自動生成できますか?
はい。JSONのサンプルを貼り付けて「型を生成」を押すと、そのJSONの構造からTypeScriptのinterface(またはtype)を自動で生成します。プロパティの型は値から推論され、文字列はstring、数値はnumber、真偽値はboolean、nullはnullとして出力します。APIレスポンスの例をそのまま貼り付けるだけで、手作業での型定義が不要になります。
ネストしたオブジェクトや配列も型にできますか?
はい。ネストしたオブジェクトは、親の型名にプロパティ名を連結した別の型(例: Root の address プロパティなら RootAddress)として再帰的に切り出します。配列は要素の型を推論し、要素がオブジェクトの場合は要素用のinterfaceを生成して T[] の形にします。空配列は any[]、要素の型が複数ある混在配列は (A | B)[] のようなユニオン配列として出力します。
省略可能(オプショナル)なプロパティはどう判定されますか?
オブジェクトの配列を型にするとき、すべての要素に共通して存在するキーは必須、一部の要素にしか存在しないキーは省略可能(?付き)として扱います。たとえば注文データの配列で一部だけに note があれば note?: string になります。また、値が null のプロパティを ? にする「nullを任意扱い」オプションを有効にすると、nullを含むプロパティをオプショナルとして出力します。
interfaceとtype(型エイリアス)はどちらを選ぶべき?
どちらでもオブジェクトの型を表現できます。interfaceは宣言のマージやextendsによる継承がしやすく、オブジェクトの形を表す用途で広く使われます。typeはユニオン型・交差型・マップ型など、より柔軟な型表現に向いています。本ツールではオプションで切り替えられるので、プロジェクトの規約に合わせて選んでください。迷う場合はinterfaceが無難です。
生成した型で実行時の検証もできますか?
いいえ。TypeScriptの型はコンパイル時のみに機能し、ビルド後のJavaScriptには残らないため、実行時にJSONが型どおりか検証することはできません。実行時バリデーションが必要な場合は、zodやio-tsなどのスキーマライブラリを併用してください。本ツールが生成するのはあくまで開発時の静的な型定義です。

関連ツール

カウントダウン計算