JA

JSONをTypeScriptに変換

JSONをTypeScriptに変換するには、下にサンプルデータを貼り付けます。入れ子のオブジェクト・配列・省略可能なフィールドを含むインターフェースまたは型、あるいはJSONスキーマを生成します。データはブラウザの外に出ません。

出典：TypeScript Handbook – Object Types (interfaces, optional properties, readonly)。更新日：

マイツールボックス

結果

結果
export interface Root { id: number; name: string; email: null; tags: string[]; address: Address; orders: Order[]; active: boolean; } export interface Address { street: string; zip: string; } export interface Order { no: number; total: number; voucher?: string; }
集計
JSON 217文字から3個の型を生成しました。
サンプルデータにあることだけを推定します。そこで一度もnullでなかったフィールドはnull許容とは判定されず、すべてのオブジェクトにないフィールドは省略可能（?）になります。

計算方法

JSONをTypeScriptに変換するとは、サンプルデータから適切な型を導き出すことです。{"id": 1, "name": "Anna"}は、id: numberとname: stringを持つインターフェースになります。このツールはJSONをブラウザの中で読み取り、同じ種類のオブジェクトをまとめて、型をソースコードとして書き出します。アップロードはありません。

使い方

  1. JSONをフィールドに貼り付けます（APIのレスポンスなど）。
  2. 出力を選びます：インターフェース、型（type）、JSONスキーマ。名前・export・readonly・インデントは好みで設定します。
  3. 結果をコピーしてプロジェクトに貼り付けます。

型の作られ方

制限

結果は下書きです。サンプルデータはあり得るすべてのケースを示すわけではないため、APIの仕様書と照らして確認してください。

プライバシー

JSONはブラウザの外に出ません。次の作業にはJSONを整形、CSVをJSONに変換、YAMLをJSONに変換が使えます。

よくある質問

JSONをTypeScriptに変換するには？

JSONを貼り付けて「TypeScriptのインターフェース」を選ぶと、すべてのフィールド・入れ子の型・配列を含むインターフェースが生成されます。コピーしてプロジェクトに貼り付けてください。

interfaceとtypeはどちらがよいですか？

どちらも同じ形を表せます。interfaceは拡張でき、エラーメッセージが分かりやすいことが多く、typeはユニオンで柔軟です。このツールは希望に応じてどちらも生成します。

省略可能なフィールドはどう判別しますか？

あるオブジェクトにはなく、別のオブジェクトにあるフィールドには?が付きます。そのために、配列内の複数のオブジェクトをまとめて調べます。

JSONスキーマも生成できますか？

できます。「JSONスキーマ（2020-12）」を選ぶと、型・入れ子のプロパティ・必須フィールドの一覧を含むスキーマが出ます。

JSONはアップロードされますか？

いいえ。型はすべてブラウザの中で作られます。

出典・根拠

更新日： · 編集方針

関連ツール