てもとツール

JSON→TypeScript型生成ツール｜推論の根拠まで表示

JSONを貼り付けるとTypeScriptの型定義を作ります。複数のサンプルをまとめて読み、どのキーが何件にあったかまで表示します。大きな整数の桁落ちや、そのままでは書けないキーも知らせます。

ブラウザ内処理 公開

同じ形の JSON を 2 件以上貼ると、片方にしか無いキーに ? が付きます。 オブジェクト・配列・文字列は区切りなしで続けて貼れます。

詳細設定

JSON を貼り付けて「型を生成」を押してください

型定義と、どのキーが何件にあったかの根拠がここに表示されます

このツールについて

使い方・特徴・補足情報

JSON→TypeScript型生成とは

JSON→TypeScript型生成は、手元のJSONから型定義を書き起こすツールです。 貼り付けてボタンを押すと、入れ子も配列もまとめて interface の形になります。

同じ形のJSONを並べて貼ると、全部を1つの型にまとめます。 片方にしか無いキーには ? が付くので、省略される項目を取りこぼしません。

型の下には、何件中何件にあったキーなのかを表で並べます。 その型を信じてよいかどうかを、目で確かめてから貼り付けられます。

処理はブラウザの中で終わります。 社内APIのレスポンスも、そのまま貼り付けてかまいません。

こんな人におすすめ

TypeScriptを書く人

楽になること

JSONから型定義を書き起こす作業

避けたい手間

型と実データが食い違うこと

解決できる困りごと

  • レスポンスの項目を1つずつ数えながら型を手打ちする作業と、写し間違いを減らせます
  • 1件のサンプルからは分からない「省略されることがある項目」を、複数件を並べて拾えます
  • そのままでは書けないキー名を見落として、貼った型がエディタで赤くなる手戻りを防げます
  • 安全に扱える整数を超えるIDが読んだ時点で丸まっていたことに、型を書く前の段階で気づけます
  • 同じ形の入れ子ごとに似た型名が増えて、どれが本物か分からなくなる状態を避けられます

使い方

  1. APIのレスポンスなど、型を起こしたいJSONを貼り付けます
  2. 省略される項目まで拾いたいときは、別の日のレスポンスも続けて貼ります
  3. 「型を生成」ボタンを押します
  4. 「コピー」ボタンで型定義を写し、エディタに貼り付けます
  5. 下の「推論の根拠」で、各項目が何件にあったかを確かめます
  6. 型名や字下げを変えたいときは、詳細設定を開いて設定し直します

使用例

2件のレスポンスをまとめて型にする

2件目に nickname がないので ? が付きます。1件だけ貼った場合は必須の項目に見えてしまう点に注目してください。

入力

{"id":1,"name":"佐藤","nickname":"さとちゃん","tags":["新人"]}
{"id":2,"name":"鈴木","tags":[]}

出力

export interface Root {
  id: number;
  name: string;
  nickname?: string;
  tags: string[];
}

そのままでは書けないキーを囲む

ハイフン入りと数字始まりのキーはクォートが必要です。囲まずに貼るとエディタで構文エラーになります。

入力

{"user-name":"佐藤","1st":true,"note":null}

出力

export interface Root {
  'user-name': string;
  '1st': boolean;
  note: null;
}

大きなIDの桁落ちに気づく

書いた値と読まれた値が違います。型は number で通りますが、値そのものが変わっている点が問題です。

入力

{"postId": 12345678901234567890}

出力

書いた値 12345678901234567890 → 読まれた値 12345678901234567000

活用シーン

APIのレスポンスに型を付ける

受け取ったJSONをそのまま貼れば、入れ子ごとに型が分かれて出ます。手で数えながら書き写す手間が消えます。

省略される項目を洗い出す

3日ぶんのレスポンスを続けて貼ると、抜けることのあるキーに ? が付きます。件数の内訳も一緒に出ます。

設定ファイルの形を型にする

手元のJSON設定を貼れば、読み込み側で受ける型の下書きになります。項目の増減も差分で追えます。

モックデータの形をそろえる

テスト用に手書きしたJSONから型を起こすと、本物のレスポンスとの食い違いが見つかります。

他ツールの出力を型にする

CSVやYAMLから直したJSONも入口にできます。表計算から起こしたデータの列名がそのまま項目になります。

型定義のたたき台を共有する

生成した型をそのまま貼れば、レビューの出発点になります。根拠の表を添えると判断の材料も渡せます。

技術的な解説

補足: 仕組み

読み取りは JSON.parse で行います。貼り付けたテキストを走査して JSON 値を順に切り出すので、改行区切りでも連結でも同じ結果になります。

推論は値ごとの型を1つずつ合流させる形です。オブジェクト同士は別々の型にせず合流させ、キーの出現回数を数えて ? の要否を決めます。

同じ構造の入れ子は署名を突き合わせて1つの型にまとめます。桁落ちの検出だけは解析結果ではなく入力の字面を数えます。

もっと詳しく

1件のサンプルから作った型が当たらない理由

レスポンス1件には「そのとき返ってきた項目」しか写っていません。省略されることがある項目は、無かった回を見ないと分かりません。

だから1件から作った型は、省略されうる項目まで必須として書いてしまいます。実行時に undefined が来て初めて気づく形です。

本ツールは複数のサンプルをまとめて読み、件数の内訳を表に出します。足りないと感じたらサンプルを足してください。

大きなIDを number で受けてはいけない

JavaScript の数値が正確に表せる整数は9007199254740991までで、16桁の値にも危ないものがあります。これを超えると読んだ時点で丸められます。

型としては number で通るため、エディタも実行時も何も言いません。気づくのは、保存したIDが別のレコードを指していたときです。

入力の字面を見て丸めを検出したら、書いた値と読まれた値を並べて知らせます。桁を保つなら文字列で受けてください。

JSON整形ツールとの使い分け

JSON整形ツールは JSON を JSON のまま読みやすくします。字下げをそろえ、書き方の誤りを見つける道具です。

本ツールは JSON を出発点にして、別の言語の型定義を書き出します。中身を確かめたいなら前者、受け取る側のコードを書くなら本ツールです。

両方を続けて使う形が実務では多くなります。まず整形して形を確かめ、それから型を起こしてください。

よくある質問

生成した型はそのままプロジェクトに貼って大丈夫ですか？

下書きとして貼ったうえで、根拠の表を見ながら直してください。サンプルが1件のときは省略されうる項目まで必須として書かれるので、件数の少ない項目は仕様書と突き合わせると安全です。

複数のJSONはどう貼れば1つの型にまとまりますか？

オブジェクト・配列・文字列なら、改行で並べても続けて貼ってもカンマで区切ってもかまいません。数値や true / false / null は終わりの目印を持たないので、空白かカンマで区切ってください。

日付の文字列を Date 型として推論してくれますか？

JSONに日付という型は無く、届いているのはあくまで文字列なので推論しません。日付らしい文字列があったことは通知で知らせるので、変換するかどうかは受け取ったあとに決めてください。

interface と type はどちらを選べばよいですか？

後から項目を足して広げたいなら interface、ほかの型と組み合わせて合成したいなら type が向きます。迷ったら既定の interface のままで問題なく、詳細設定でいつでも切り替えられます。

貼り付けたJSONはどこかに送られますか？

貼り付けたJSONが外へ出ることはありません。読み取りも型の生成もブラウザの中だけで動くので、社内APIのレスポンスもそのまま貼れます。

関連記事

このツールの使い方や活用例をブログでも紹介しています。

関連ツール

同じカテゴリの他のツールも合わせてどうぞ。