JSON → TypeScript 変換ツール

JSONを貼り付けるだけで、ネストしたすべてのオブジェクトに対応するTypeScriptのinterfaceを生成し、そのままプロジェクトで使えます。

言語:

型名:

入力 (JSON)

出力 (typescript)

JSONからTypeScriptのinterfaceを生成

APIレスポンスの型を手で書くのは時間がかかり、ミスも起きやすい作業です。このツールはJSONサンプルを読み取り、オブジェクトの形ごとにexportされたinterfaceを1つずつ生成します。ネストしたオブジェクトはそれぞれ名前付きのinterfaceになり、配列はstring[]のような型付き配列に、数値・文字列・真偽値はnumber、string、booleanにマッピングされます。出力されるのは型宣言だけで実行時のコードを含まないため、バンドルサイズは一切増えません。

使い方

連携するAPIの実際のレスポンスを貼り付けます。たとえばブラウザのネットワークタブからコピーできます。
型名には、UserやApiResponseなど、ルートオブジェクトが表すものを指定します。
生成されたinterfaceをtypes.tsファイルにコピーし、const user: User = await res.json() のようにfetchの結果に型注釈を付けます。

よくある質問

生成されるのはinterfaceですか、それともtypeエイリアスですか？: exportされたinterfaceを生成します。APIデータの型付けにおいてはオブジェクト型のtypeエイリアスと同じように使えるので、コピー後に自由に名前を変えたり書き換えたりできます。
オプショナルなプロパティ（field?: string）にするにはどうすればよいですか？: 生成ツールはサンプルに含まれる情報しか把握できません。配列に複数のオブジェクトを入れ、その一部でフィールドを省略しておくと、そのプロパティはオプショナルとして生成されます。サンプル内で常にnullのフィールドはnull型になるため、型がわかっている場合は実際の値を入れてください。
interfaceは実行時にデータを検証しますか？: いいえ。TypeScriptの型はコンパイル時に消えるため、不正なレスポンスを受け取ってもエラーにはなりません。実行時のチェックが必要な場合は、JSON SchemaツールでJSON Schemaを生成して検証するか、バリデーションライブラリを使用してください。

例: JSONからTypeScriptへの変換

入力JSON

{
  "id": 42,
  "name": "Ada Lovelace",
  "email": "ada@example.com",
  "roles": ["admin", "editor"],
  "profile": { "bio": "Mathematician", "website": "https://example.com" }
}

生成されたTypeScript（User）

export interface User {
    id:      number;
    name:    string;
    email:   string;
    roles:   string[];
    profile: Profile;
}

export interface Profile {
    bio:     string;
    website: string;
}