JSONをTypeScriptに変換
JSONをTypeScriptインターフェースに変換し、型定義を生成
JSON入力
TypeScript出力
JSONをTypeScriptとは？
ReactかAngularのアプリを作っていて、JSONのAPIレスポンスが手元にあり、そのためのTypeScriptインターフェースを定義する必要がある。深くネストされたレスポンスを手書きするのは面倒でエラーが起きやすい — 型を一つ間違えるとエディタがバグを検出しなくなる。このツールはJSONの構造からTypeScriptインターフェースを直接推論するので、レスポンスをペーストするだけで数秒で使える型定義が得られる。
JSONを貼り付けるとTypeScriptが得られます。ツールはブラウザで実行されます。サーバーには送信されません。出力は標準のTypeScript構文に従います。
使い方
JSONを貼り付け
左のエディタにJSONを貼り付けるか、ファイルをアップロードしてください。サンプルデータにはサンプルを使用してください。ジェネレーターは構造から型を推論します。関心のあるすべてのフィールドを示す代表的なデータを使用してください。
インターフェースを確認
右パネルに生成されたインターフェースが表示されます。ネストされたオブジェクトには独自のインターフェースがあります。配列はType[]として型付けされます。オプションフィールドは実装に応じて?を使用する場合があります。
コピーまたはダウンロード
TypeScriptを取得するにはコピーまたはダウンロードを使用してください。プロジェクトに貼り付けてください。名前の調整、ジェネリックの追加、オプションフィールドの修正が必要な場合があります。先にJSONを検証するにはJSONバリデーターを使用してください。
JSONをTypeScriptが役立つ場面
API統合では、レスポンスペイロード用の型が必要になることがよくあります。サンプルレスポンスをここに貼り付けると、Angular、React、Nodeプロジェクトに統合できるインターフェースが得られます。設定ファイル、Webhookペイロード、データベースドキュメントも同様に処理できます。複雑なネスト構造のインターフェースを手書きするのはエラーのもとです。このツールはサンプルから構造を推論します。スキーマベースの生成にはJSONスキーマジェネレーターとquicktypeなどのツールを使用してください。
JSONをTypeScriptの例
JSONオブジェクトからTypeScriptインターフェースを生成する例です。
例：加入者レコード
JSON入力：
生成されたTypeScript出力：
制限事項
ジェネレーターはサンプルから推論します。フィールドがstring | numberになり得るがサンプルに文字列しか含まれない場合、型はstringになります。配列が空になり得る場合、要素型はunknownになる場合があります。出力を確認して修正してください。スキーマベースの生成にはJSONスキーマジェネレーターとquicktypeなどのツールを使用してください。
よくある質問
JSONからTypeScriptインターフェースを自動生成するにはどうすればいいですか？
このツールにJSONを貼り付けると、構造に基づいてTypeScriptインターフェースが生成されます。ネストされたオブジェクトはそれぞれ独自のインターフェースになり、配列はType[]として型付けされます。出力をAngular、React、またはNodeプロジェクトにコピーしてください。
JSONにおけるTypeScriptのinterfaceとtypeの違いは？
どちらもうまく機能します。interfaceは拡張や実装が必要な場合に適しています。typeはユニオン型やマップ型に適しています。ほとんどのAPIレスポンスの形状ではどちらでも動作します — ジェネレーターはデフォルトでinterfaceを出力します。
データはどこかに送信されますか？
いいえ。すべてブラウザで実行されます — JSONはあなたのマシンから送信されません。本番のAPIレスポンスでも安全に使用できます。
オプションフィールドとenumはどうですか？
ジェネレーターはサンプルから型を推論します。オプションになり得るフィールドは自動的に?とマークされません — 出力を確認し、必要に応じて?を追加してください。enumについては、フィールドが一貫して特定の文字列値を使用する場合、stringを"active" | "inactive"のようなユニオン型に置き換えることができます。
関連ツール
TypeScriptについてはtypescriptlang.orgとTypeScriptオブジェクトを参照してください。JSONについてはjson.orgとMDN JSONを参照してください。スキーマからコードへの生成にはquicktypeを参照してください。RFC 8259（JSON仕様）も参照してください。