JSONからTypeScript型生成
JSONの構造からTypeScriptの型定義を作るツール。APIレスポンスの型付けやモックデータの型作成に使える。
JSONからTypeScript型生成
223文字
TypeScript
export interface Root {
id: number
name: string
email: null
tags: string[]
profile: Profile
posts: PostsItem[]
}
export interface PostsItem {
id: number
title: string
draft?: boolean
}
export interface Profile {
age: number
city: string
}使い方
- JSONを入力する。
- 必要に応じてルートの型名を変更する。
- 生成された型をコピーしてコードに貼り付ける。
こんな用途に
- APIレスポンスのサンプルから型定義を作りたいとき。
- 設定ファイルやモックデータに型を付けたいとき。
- 深くネストしたJSONの構造を把握したいとき。
仕組み
- ネストしたオブジェクトはキー名をPascalCaseにした別のinterfaceとして出力。
- 配列の要素が複数の型を持つ場合はユニオン型にまとめる。
- 配列内のオブジェクトはキーを統合し、一部の要素にしかないキーはオプショナル（?）にする。
- 生成はブラウザ内で完結し、サーバーへ送信しない。
確認ポイント
- nullしか現れないキーはnull型になる。実際の型を手で追記する。
- 空配列はunknown[]になる。要素を1つ入れたJSONで生成すると型が付く。
- 配列に複数の要素を入れると、オプショナルなキーを判定できる。
手元でやるには
JSONから型を生成
必要環境: Node.jsnpx quicktype --lang ts --just-types data.jsonよくある質問
typeではなくinterfaceで出力するのはなぜ？
オブジェクトの型は拡張しやすいinterfaceで出力する。ルートが配列やプリミティブの場合はtypeで出力する。
日付文字列はDate型になる？
ならない。JSONの日付は文字列のため、string型として出力する。