OpenAPIスキーマの変更を検知してTypeScriptクライアントを自動生成してくれるViteプラグイン

はじめに

OpenAPIスキーマの変更を検知してTypeScriptクライアントコードを自動生成してくれるViteプラグインvite-plugin-openapi-typescript-codegenを作ってみたので、導入方法を紹介します。

内部的にはOpenAPI Typescript Codegenを使っていて、Viteサーバー起動中は常に入力ファイルの変更を監視して変更があればOpenAPI Typescript Codegenを実行するという仕組みです。

インストール

$ npm install -D @7nohe/vite-plugin-openapi-typescript-codegen

利用方法

vite.config.tsにインストールしたプラグインを追加します。

この例ではpetstore.yamlというスキーマファイルを読み込んでいて、出力先はopenapiという名前にしています。

import { defineConfig } from "vite";
import openApiTypescriptCodegen from "@7nohe/vite-plugin-openapi-typescript-codegen";

export default defineConfig({
  plugins: [
    openApiTypescriptCodegen({
      input: './petstore.yaml',
      output: './openapi',
    })
  ],
});

あとはviteコマンドで開発サーバーを起動すればOKです。

導入例はvite-plugin-openapi-typescript-codegenのリポジトリにありますので、参考にしてみてください。

おわりに

このプラグインを使うことにより、スキーマファイル変更によるTSコードを最新化するための生成コマンドを毎回叩かなくてもよくなります。

Viteの開発サーバーを起動しているだけで常にスキーマファイルと同期したTSクライアントを得ることができ便利です。使う機会があればぜひ試してみてください。