JSONをTypeScriptに変換
JSONをTypeScriptインターフェースに変換し、型定義を生成
JSON入力
TypeScript出力
JSONをTypeScriptとは？
TypeScriptはJavaScriptに静的型を追加します。APIや設定ファイルからのJSONを扱う際、構造を記述するインターフェースや型が必要になることがよくあります。手書きは面倒です。このツールはJSONからTypeScriptインターフェースを推論します：キーと値を解析し、対応する型定義を生成します。
JSONを貼り付けるとTypeScriptが得られます。ツールはブラウザで実行されます。サーバーには送信されません。出力は標準のTypeScript構文に従います。
使い方
JSONを貼り付け
左のエディタにJSONを貼り付けるか、ファイルをアップロードしてください。サンプルデータにはサンプルを使用してください。ジェネレーターは構造から型を推論します。関心のあるすべてのフィールドを示す代表的なデータを使用してください。
インターフェースを確認
右パネルに生成されたインターフェースが表示されます。ネストされたオブジェクトには独自のインターフェースがあります。配列はType[]として型付けされます。オプションフィールドは実装に応じて?を使用する場合があります。
コピーまたはダウンロード
TypeScriptを取得するには<strong>コピー</strong>または<strong>ダウンロード</strong>を使用してください。プロジェクトに貼り付けてください。名前の調整、ジェネリックの追加、オプションフィールドの修正が必要な場合があります。先にJSONを検証するにはJSONバリデーターを使用してください。
JSONをTypeScriptが役立つ場面
API統合では、レスポンスペイロード用の型が必要になることがよくあります。サンプルレスポンスをここに貼り付けると、Angular、React、Nodeプロジェクトに統合できるインターフェースが得られます。設定ファイル、Webhookペイロード、データベースドキュメントも同様に処理できます。複雑なネスト構造のインターフェースを手書きするのはエラーのもとです。このツールはサンプルから構造を推論します。スキーマベースの生成にはJSONスキーマジェネレーターとquicktypeなどのツールを使用してください。
JSONをTypeScriptの例
JSONオブジェクトからTypeScriptインターフェースを生成する例です。
例：加入者レコード
JSON入力：
生成されたTypeScript出力：
制限事項
ジェネレーターはサンプルから推論します。フィールドが<code>string | number</code>になり得るがサンプルに文字列しか含まれない場合、型は<code>string</code>になります。配列が空になり得る場合、要素型は<code>unknown</code>になる場合があります。出力を確認して修正してください。スキーマベースの生成にはJSONスキーマジェネレーターとquicktypeなどのツールを使用してください。
よくある質問
オプションフィールドはマークされますか？
実装によります。一部のジェネレーターはすべてのフィールドを必須としてマークし、他はサンプルから推論します。出力を確認し、必要に応じて?を追加してください。
ユニオン型は？
同じキーが異なるオブジェクトで異なる型を持つ場合、ジェネレーターはstring | numberなどのユニオンを使用する場合があります。または1つの型を選択する場合があります。出力を確認してください。
データは送信されますか？
いいえ。生成はブラウザで実行されます。
enumは？
フィールドが固定の文字列値セットを持つ場合、ジェネレーターは"a" | "b" | "c"のようなユニオン型を生成する場合があります。明示的なenumには出力を編集してください。
関連ツール
TypeScriptについてはtypescriptlang.orgとTypeScriptオブジェクトを参照してください。JSONについてはjson.orgとMDN JSONを参照してください。スキーマからコードへの生成にはquicktypeを参照してください。RFC 8259（JSON仕様）も参照してください。