JSONからTypeScript変換ツール

このツールとは JSONからTypeScript変換ツール

このツールは、あらゆるJSONをきれいなTypeScriptインターフェースに変換します。すべてブラウザ内で動作します。構造全体をたどり、ネストされたオブジェクトごとに名前付きインターフェースを作成し、各フィールドの型を推論し、配列を中身から型付けします。配列内のオブジェクトのキーが揃っていない場合、欠けているキーは任意(オプショナル)として扱われ、実データでコンパイルできる結果になります。

使い方

  1. 左の入力欄にJSONを貼り付けます。
  2. Root以外にしたい場合はルートインターフェース名を入力します。
  3. 右側に生成されるTypeScriptを確認します。入力に合わせて更新されます。
  4. コピーを押して、インターフェースをそのままコードに貼り付けます。

こんなときに便利

APIからのJSONレスポンスはあるのに型がない、ということはありませんか。貼り付ければ数秒で使えるインターフェースが得られます。1件だけavatarフィールドが無いユーザー一覧を渡すと、そのフィールドは任意(avatar?: string)として印が付き、推測ではなくエンドポイントが実際に返す内容に型が一致します。

よくある質問

任意フィールドはどのように判定されますか?

オブジェクトの配列を貼り付けると、すべての要素のキーを比較します。すべてに存在しないキーは任意(?付き)になります。すべての要素にあるキーは必須のままです。

JSONはサーバーに送信されますか?

いいえ。変換はすべてブラウザ内でJavaScriptにより実行されます。何もアップロードされないため、非公開のAPIレスポンスや内部データが端末の外に出ることはありません。

ネストされたオブジェクトや配列はどう扱われますか?

ネストされた各オブジェクトは、キー名から導かれた名前付きインターフェースになります。配列は中身から型付けされ、number[]、オブジェクト配列向けの統合インターフェース、または混在時には (string | number)[] のような共用体になります。

nullや空の配列はどうなりますか?

null値はnull型になり、空の配列は要素型を推論する材料がないためany[]になります。代表的な例を入れると、より正確な型が得られます。

入力したJSONを含めてこのツールを共有できますか?

はい。入力に合わせてURLが自動更新されます。アドレスバーからコピーするか、リンクをコピーボタンを使ってください。開いた人にはあなたのJSONが変換済みで表示されます。

関連ツール