JSON から TypeScript の型を生成する方法
- JSON の例を貼り付けます。配列に含まれる要素が多いほど、任意フィールドやユニオン型を正確に検出できます。
- ルート型の名前を設定し、
interfaceかtypeかを選び、exportとreadonlyの有無を指定します。 - TypeScript のコードをプロジェクトにコピーするか、
.tsファイルとしてダウンロードします。
JSON から TypeScript の型を推定するルール
| JSON | TypeScript |
|---|---|
"Ada" | string |
42、3.14 | number |
true | boolean |
ほかの値と並ぶ null | string | null のようなユニオン型 |
"address": {"city": "Paris"} | 独立した interface Address |
"users": [{"id": 1}] | User[]（要素名は単数形になります） |
| 一部の配列要素にないキー | 任意プロパティ key?: |
[1, "a"] | (string | number)[] |
[] | unknown[] |
{} | Record<string, unknown> |
変換例
JSON {"id": 1, "name": "Ada", "tags": ["admin"], "manager": null} は次のように変換されます：
export interface Root { id: number; name: string; tags: string[]; manager: null; }
Root は User や ApiResponse など、意味のある名前に変更しましょう。請求先住所と配送先住所のように、まったく同じ形のネストしたオブジェクトは 1 つの interface を共有します。また、有効な識別子でないキーは "first-name": string のように引用符で囲まれます。
よくある質問
interface と type はどちらを選ぶべきですか？
オブジェクトの形を表す場合、どちらも同じように動作します。interface は拡張やマージができ、type エイリアスはユニオン型も表現できます。オブジェクトには interface を使うチームが多いですが、コードベースのスタイルに合わせてください。
任意フィールドはどのように検出されますか？
同じ配列内のオブジェクトはマージされます。一部のオブジェクトにないキーは任意プロパティ（key?:）になり、値の型が異なるキーはユニオン型になります。
実行時にデータを検証できますか？
いいえ。TypeScript の型はコードの実行時には消えてしまいます。受け取ったデータをチェックするには、同じ例から JSON Schema 生成ツールで JSON Schema を作成し、スキーマライブラリで検証してください。
JSON はサーバーに送信されますか？
いいえ。型はブラウザ内で生成されるため、非公開の API レスポンスも安心して貼り付けられます。