実際のペイロードから型を
APIのレスポンスの型を手で書くのは時間がかかり、実態ともずれていきます。実際のレスポンスを貼り付ければ、ネストしたオブジェクトはそれぞれ名前付きのインターフェースになり、配列には要素の型が付きます。ルートの名前と、インターフェースか型エイリアスかも選べます。
JSON→TS
JSONをTypeScriptに変換する
APIのレスポンスなどのJSONのサンプルを貼り付けると、ネストした型、オプショナルなフィールド、nullまで考慮したTypeScriptのインターフェースや型エイリアスが手に入ります。
出力
入力241文字・13行
結果235文字・16行
export interface Root {
id: number;
name: string;
email: string;
isActive: boolean;
address: Address;
tags: string[];
scores: number[];
}
export interface Address {
street: string;
city: string;
zipCode: string;
}
くわしく知る
JSONをTypeScriptに：手に入るもの
形の推論のしかた
配列に複数のオブジェクトがあると、そのフィールドがまとめられます。一部の要素にないフィールドはオプショナル（?）に、どこかでnullになっているフィールドはstring | nullのようなユニオンになります。サンプルが多様なほど、型は正確になります。常にnullだったフィールドはnull型になってしまうので、見直しましょう。
使い方
JSONをTypeScriptに変換する方法
JSONを貼り付ける
左のパネルにJSONデータを貼り付けます。最初はサンプルデータが入っています。
出力形式を選ぶ
「interface」か「type」エイリアスのモードを選びます。必要ならルートの名前も設定します。
変換してコピー
TypeScriptの型は入力に合わせて更新されます（exportはオフにもできます）。コピーするか、.tsファイルでダウンロードしましょう。
活用ガイド
コツとガイド
JSONに型を付ける理由
TypeScriptのインターフェースは、コードがデータの形に合っているかを確かめて、コンパイル時にバグを見つけてくれます。APIのレスポンスを型にすれば、実行時のエラーが減ります。
複雑にネストしたAPIのペイロードの型を手で書く代わりに、レスポンスを貼り付ければ、数秒で正確な型が手に入ります。
プロのコツプライベート
JSONのデータはブラウザの中にとどまります。アップロードも、保存も、トラッキングもありません。
社内APIのレスポンスは社内のままに。型はブラウザの中で生成されます。
プライバシーよくある質問
よくある質問
JSONからTypeScriptへの変換について知っておきたいこと