【TypeScript】JSON 文字列を型ファイルに変更するCLIアプリ quicktype の紹介

JSON to TypeScript • quicktype
　APIを叩くアプリやスクリプトを作る時、そのAPIのリクエスト、レスポンスの型定義ファイルが欲しくなります。無の状態からオブジェクトを直書きするにはドキュメントを都度参照する必要があり、書き間違いの確率も少なくありません。quicktype を使うことで一度APIを叩くだけでレスポンスを型ファイルにできます（残念ながらリクエストはちょっとやり方が思いつかないです）。
　quicktypeはJSON文字列を元にTypeScript用型定義ファイルを生成できるCLIアプリです。使い方は次の公式からの引用の通りです。

Install quicktype with npm
$ npm install -g quicktype
Generate TypeScript for a simple JSON sample
$ echo '[1, 2, 3.14]' | quicktype --lang ts
Generate TypeScript for a sample JSON file
$ quicktype person.json -o Person.ts
Generate TypeScript with runtime typechecks for a Bitcoin API
$ quicktype https://blockchain.info/latestblock -o LatestBlock.ts
Generate TypeScript from a directory of samples
$ ls spotify-api-samples
album.json artist.json track.json
$ quicktype spotify-api-samples -o SpotifyClient.ts
Generate TypeScript from a Postman Collection
$ quicktype ImgurAPI_postman_collection.json -l postman -o Imgur.ts

　大量のファイルを処理するにはあらかじめファイルのリストを用意して正規表現を使ってコマンドを生成するのが楽です。
　APIレスポンスのJSONファイルを自動生成するには、axiosのインターセプターなどのAPIとのやり取りに、通信内容をJSONとして保存する処理をフックさせる方法が考えられます。この方法でJSONファイルを作り、quicktypeに流すことで通信内容の型定義ファイルを作れます。これは例えば次のコードで実現できます。

export class Helper {
  /**
   * Blob にできるデータをダウンロード
   * @param data
   * @param fileName
   * @param mimeType
   */
  static downloadData(data: BlobPart, fileName: string, mimeType: string): void {
    const blob = new Blob([data], {
      type: mimeType,
    });
    const url = window.URL.createObjectURL(blob);
    Helper.downloadURL(url, fileName);
    setTimeout(function () {
      return window.URL.revokeObjectURL(url);
    }, 1000);
  }

  /**
   * URL のファイルを fileName でダウンロード.
   * @param url ダウンロード先
   * @param fileName a タグ先の header でファイル名が指定されているとそちらを優先
   */
  static downloadURL(url: string, fileName?: string): void {
    const a = document.createElement('a');
    a.href = url;
    a.download = fileName || url.replace(/^.*\//, '');
    document.body.appendChild(a);
    a.style.display = 'none';
    a.click();
    a.remove();
  }
}

axios.interceptors.response.use(
    (response) => {
      // response を受けたら中身をJSON化
      // URLを元にファイル名を生成
      Helper.downloadData(
        JSON.stringify(response.data, null, 2),
        response.config.url?.replace(/\//g, '###') + '.json',
        'text/plain'
      );
    },
    (error) => error,
);

　こうするとレスポンスをJSONファイルにできます。request の interceptors に同様のモノを作ることでリクエストのJSONファイルも作れます（これは自動生成しても手間が手書きと大して変わらないのでそれ程便利ではないですが）。この出力されたJSONファイルを先の通りにquicktypeに通すと型定義ファイルを得られます。型定義ファイルを元に予測補完を使うことで間違えることなくサクサクとAPIのインターフェースに関わるコーディングができます。