JSONからTypeScript変換ツール
このツールとは JSONからTypeScript変換ツール
このツールは、あらゆるJSONをきれいなTypeScriptインターフェースに変換します。すべてブラウザ内で動作します。構造全体をたどり、ネストされたオブジェクトごとに名前付きインターフェースを作成し、各フィールドの型を推論し、配列を中身から型付けします。配列内のオブジェクトのキーが揃っていない場合、欠けているキーは任意(オプショナル)として扱われ、実データでコンパイルできる結果になります。
使い方
- 左の入力欄にJSONを貼り付けます。
- Root以外にしたい場合はルートインターフェース名を入力します。
- 右側に生成されるTypeScriptを確認します。入力に合わせて更新されます。
- コピーを押して、インターフェースをそのままコードに貼り付けます。
こんなときに便利
APIからのJSONレスポンスはあるのに型がない、ということはありませんか。貼り付ければ数秒で使えるインターフェースが得られます。1件だけavatarフィールドが無いユーザー一覧を渡すと、そのフィールドは任意(avatar?: string)として印が付き、推測ではなくエンドポイントが実際に返す内容に型が一致します。
よくある質問
任意フィールドはどのように判定されますか?
オブジェクトの配列を貼り付けると、すべての要素のキーを比較します。すべてに存在しないキーは任意(?付き)になります。すべての要素にあるキーは必須のままです。
JSONはサーバーに送信されますか?
いいえ。変換はすべてブラウザ内でJavaScriptにより実行されます。何もアップロードされないため、非公開のAPIレスポンスや内部データが端末の外に出ることはありません。
ネストされたオブジェクトや配列はどう扱われますか?
ネストされた各オブジェクトは、キー名から導かれた名前付きインターフェースになります。配列は中身から型付けされ、number[]、オブジェクト配列向けの統合インターフェース、または混在時には (string | number)[] のような共用体になります。
nullや空の配列はどうなりますか?
null値はnull型になり、空の配列は要素型を推論する材料がないためany[]になります。代表的な例を入れると、より正確な型が得られます。
入力したJSONを含めてこのツールを共有できますか?
はい。入力に合わせてURLが自動更新されます。アドレスバーからコピーするか、リンクをコピーボタンを使ってください。開いた人にはあなたのJSONが変換済みで表示されます。