JSONからTypeScriptへ
JSONサンプルを貼り付けると、その構造に合致するTypeScriptインターフェースをツールが推論します。フィールドの型は観測された値(string、number、boolean、Array<T>)から決まり、ネストされたオブジェクトにはそれぞれ独自の名前付きインターフェースが割り当てられます。null または欠落と観測されたフィールドは、選んだスタイルに応じて省略可能(?)または null 許容(| null)になります。
JSONをTypeScriptに変換する方法
-
1
JSONを貼り付ける
1つのサンプルでも十分ですが、複数のサンプルを与えると null 許容性とユニオン型の推論精度が向上します。
-
2
出力スタイルを選ぶ
`interface`(既定)、`type` エイリアス、またはすべてのフィールドに `readonly` を付けた読み取り専用インターフェース。
-
3
省略/null の方針を選ぶ
フィールドを `?`(存在しないことがある)にするか、`| null`(常に存在するが null になりうる)にするかを指定します。
-
4
型をコピーする
`.ts` ファイルに貼り付ければ、API レスポンスに型安全にアクセスできます。
例
入力:
{ "id": 1, "name": "Alice", "age": null, "tags": ["admin", "user"], "address": { "city": "Madrid" } }
出力:
interface User {
id: number;
name: string;
age: number | null;
tags: string[];
address: Address;
}
interface Address {
city: string;
}
型のマッピング
| JSON | TypeScript |
|---|---|
| 文字列 | string |
| 整数 / 小数 | number |
| 真偽値 | boolean |
| null のみ | null |
| null + T | T | null(または T?) |
| T の配列 | T[] |
| 混在配列 | (T1 | T2)[] |
| オブジェクト | 名前付きのネストされたインターフェース |
| 空の配列 | unknown[](推論不可) |
省略可能フィールドと null 許容フィールド
foo?: string、フィールドがオブジェクトに存在しないことがあります。undefinedのチェックが必要です。foo: string | null、フィールドは常に存在しますが、明示的に null になることがあります。foo?: string | null、存在しない、または null のどちらもあり得ます。
JSON 自体に undefined はありませんが、フィールドの欠落をどう表すかは API によって異なります。使用する API のセマンティクスに合わせてください。
- REST API は通常、欠落したフィールドを省略します ->
?:。 - GraphQL は要求されたすべてのフィールドを常に返します ->
| null。 - 一部の SDK は文脈に応じて両方を使い分けます。
ユニオン型とリテラル型
サンプル全体で同じ文字列フィールドが少数の値だけを取る場合("status": "pending"、"active"、"archived")、ツールは文字列リテラルのユニオン型を出力できます。
status: "pending" | "active" | "archived";
この動作が必要なら「文字列リテラルのユニオンを推論」を有効にしてください。
よくある間違い
- 1つのサンプルだけから推論する。 すべてのフィールドが必須になり、null 許容性を観測できません。より正確な型を得るには、変化のある 5〜10 個のサンプルを与えてください。
- 空の配列。
"tags": []は型情報を持たないため、ジェネレーターはunknown[]を出力します。少なくとも1つの要素を含むサンプルを用意してください。 - 型が混在した配列。
[1, "two", true]は(number | string | boolean)[]を生成します。多くの場合、これは JSON に型を付けるのではなく設計を見直すべきことを意味します。 - 数値の文字列キー。 JSON
{"1": "a", "2": "b"}は TypeScript では依然としてオブジェクト(Record<string, string>)であり、配列ではありません。ジェネレーターはこれを正しく処理します。
よくある質問
API に合わせてください。null のフィールドを省く REST API には ?: が向いています。選択したフィールドを常に返す GraphQL には | null が向いています。迷ったときは、必須構文の T | null のほうが厳格で、コンパイル時により多くのバグを検出できます。
はい。この機能を有効にして複数のサンプルを与えると、サンプル全体で2〜5個の異なる文字列値が観測されたフィールドはリテラルのユニオン型として出力されます。それを超えると string にフォールバックします。
ほとんどの場合は interface です。拡張に対して開かれており、TypeScript による最適化も効きます。type エイリアスはユニオン、交差、タプル、マップ型に便利です。JSON から生成した型ではどちらでも機能するので、プロジェクトの規約に合わせて選んでください。
はい。ネストされた各オブジェクトはそれぞれ独自のインターフェースになり、名前はキーから導出されます(user.address -> Address)。非常に深い構造や繰り返しの多い構造では、JSON Schema と専用の schema-to-TS ジェネレーターの利用を検討してください。
関連ツール
ASCII表リファレンス
0から127までの完全なASCII表です。NUL、LF、DELなどの制御コードを含め、各文字の10進数、16進数、8進数、2進数、HTML数値文字参照を表示します。
HTML文字参照
HTMLエンティティの検索可能なリスト、その名称コードおよび数値コード、および特殊文字や記号のワンクリックコピー機能を提供します。
キーボードショートカット一覧
macOS、Windows、Linux向けに、VS Code、Chrome、GNU Readlineを使うBashの公式資料に基づく既定ショートカットを検索できます。
JavaScript圧縮ツール
変数名のリネーム、空白の削除、デッドコードの除去、定数畳み込みでJavaScriptを圧縮し、より小さなバンドルを作成します。
メールアドレス検証ツール
メールアドレスを検証します。RFC 5322構文チェック、MXレコードのライブ確認に加え、ローカル部、ドメイン、長さの詳細を表示します。メールは送信されません。
EditorConfig ジェネレーター
インデントのスタイルとサイズ、改行コード、文字コード、空白ルールを指定して .editorconfig ファイルを生成し、IDE やエディタをまたいで書式を統一できます。
このツールは他の言語でも利用できます
- JSON till TypeScript [SV]
- تحويل JSON إلى TypeScript [AR]
- JSON naar TypeScript [NL]
- JSON sang TypeScript [VI]
- JSON เป็น TypeScript [TH]
- JSON a TypeScript [ES]
- JSON ke TypeScript [ID]
- JSON vers TypeScript [FR]
- JSON zu TypeScript [DE]
- JSON do TypeScript [PL]
- JSON para TypeScript [PT]
- JSON에서 TypeScript로 [KO]
- JSON в TypeScript [RU]
- JSON'dan TypeScript'e [TR]
- JSON 转 TypeScript [ZH]
- JSON to TypeScript [EN]
- JSON a TypeScript [IT]