JSONからTypeScriptの型定義を自動で作る手順

手元の JSON から型を起こしたいときは、JSON→TypeScript型生成ツールに貼り付けてボタンを押してください。入れ子も配列もまとめて interface の形になり、そのままエディタに貼れます。

型を手で書き写すと、どこかで必ずずれる

レスポンスの項目を数えながら型を打つ作業には、3 つの落とし穴があります。

打ち間違い。20 項目もあれば、綴りの取り違えが 1 つは混ざります。エディタが赤くしてくれるのは、そのキーを実際に使ったときだけです。

入れ子の取りこぼし。深い階層は、目で追っているうちにどれが誰の子か分からなくなります。

省略される項目の見落とし。これが一番やっかいです。手元にあるレスポンス 1 件には、そのとき返ってきた項目しか写っていません。

使い方は貼って押すだけ

操作は 3 手です。

1. 型を起こしたい JSON を入力欄に貼り付ける
2. 「型を生成」ボタンを押す
3. 出てきた型定義を「コピー」でクリップボードに写す

一番外側の型名は既定で Root です。変えたいときは詳細設定を開いて、ApiUser のように打ち直してください。

サンプルを 2 件以上貼ると、抜ける項目が見つかる

このツールで一番役に立つのがこの使い方です。同じ API のレスポンスを、改行で並べて続けて貼ってください。

オブジェクトや配列なら区切り方は問いません。改行でも、間に何も入れずに続けても、カンマで区切っても同じ結果になります。

上の画面では 3 件のうち 2 件にしか nickname がありません。そのため型では nickname?: string; と省略可の印が付いています。

1 件だけ貼ったときは、この ? は付きません。無かった回を見ていないので、原理的に判断できないためです。

生成された型が当たっているかを表で確かめる

型定義の下には「推論の根拠」という表が出ます。項目ごとに、何件のオブジェクトのうち何件にそのキーがあったかを並べたものです。

型	プロパティ	生成した型	出現	備考
Root	id	number	3 件中 3 件
Root	nickname	string	3 件中 2 件	省略あり → ?
Root	tags	string[]	3 件中 3 件

「3 件中 2 件」と出ていれば、それは実データにもとづく判断です。件数が少ない項目は、仕様書と突き合わせてから確定させてください。

型だけ渡されると、当たっているかどうかを確かめる手段がありません。根拠を並べるのは、その確認を省かないための仕組みです。

そのままでは貼れないキーと、壊れた数値を知らせる

JSON のキーには、TypeScript の項目名としてそのままでは書けないものがあります。ハイフン入りの user-name や、数字から始まる 1st がその例です。

このツールは必要なものだけをクォートで囲み、囲んだキーを通知に並べます。囲まずに貼ると、エディタで構文エラーになります。

もう 1 つが数値の桁落ちです。9007199254740991 を超える整数は、JSON として読んだ時点で丸められます。

画面には、書いた値と実際に読まれた値が並べて表示されます。型としては number で通るぶん、気づきにくい種類の壊れ方です。

使用例

たとえば、社内の管理画面を担当しているフロントエンド担当者を思い浮かべてください。バックエンド側から「記事一覧の API ができた」と共有され、サンプルのレスポンスだけが手元にあります。

そのまま 1 件を貼れば型はすぐ出ますが、画面には「1 件しか見ていない」と表示されます。そこで別の記事のレスポンスをもう 2 件もらって続けて貼ると、pinned が 3 件中 1 件にしかないことが表に出ます。

省略されうる項目だと分かったので、受け取る側で pinned の有無を分岐させる書き方に決められました。

読み取りに失敗したときは、行と直し方が出る

貼り付けた JSON が読めなかったときは、理由と行番号と該当行を日本語で表示します。

末尾にカンマが残っている、キー名がクォートで囲まれていない、閉じ括弧が足りない。よくある 3 つには、直し方の一文が添えられます。

形そのものを整えたいときはJSON整形ツールが向いています。YAML で受け取った設定なら、先にYAML⇔JSON変換ツールで JSON にしてから貼ってください。

スマートフォンでもそのまま使える

画面の幅が狭いときは、入力欄も結果も縦に積み替わります。根拠の表は横に滑らせて読む形です。

移動中にレスポンスの形だけ確かめたい、といった場面でも同じ結果が得られます。

関連するツール

• JSON整形ツール — JSON のまま読みやすく整える
• YAML⇔JSON変換ツール — 設定ファイルの形式を入れ替える
• JWTデコーダー — トークンの中身を JSON として見る
• CSV⇔JSON変換ツール — 表形式のデータを JSON にする

まとめ

JSON を貼って押せば、型定義はすぐ出ます。大事なのはその型を信じてよいかどうかで、そこを確かめるために出現件数の表が付いています。

サンプルは 1 件で止めず、手に入るだけ貼ってください。省略される項目は、無かった回を見せない限り見つかりません。

入力した内容はブラウザの中だけで処理されるので、社内 API のレスポンスもそのまま貼り付けてかまいません。