環境

laravel
react+typescript

backend(Laravel)

dedoc/scrambleをインストール

composer require dedoc/scramble

dedoc/scrambleはlaravelのroutes/api.phpからAPIドキュメントを生成してくれるすごいライブラリ

localhost/docs/apiに接続

localhostの部分はご自身の環境に合わせて変えてください

もうなんか、それっぽいのができている（神）

frontend(React+typescript)

openapi-typescriptをインストール

npm i -D openapi-typescript typescript

型ファイルを生成

npx openapi-typescript http://localhost:8080/docs/api.json --output  resources/ts/types/schema.d.ts

dedoc/scrambleで生成したapiドキュメントから型ファイルをresources/ts/types/schema.d.tsに出力する

resources/ts/schema/schema.d.ts

/**
 * This file was auto-generated by openapi-typescript.
 * Do not make direct changes to the file.
 */

export interface paths {
  // ここに出力されてる
}

これでとりあえず完了

以下から楽をするための自動化

コミット時に型チェックを自動で行う

huskyとlint-stagedをインストール

npm install --save-dev husky lint-staged

バージョンは以下の通り

husky: 9.0.11
lint-staged: 15.2.7

メジャーバージョンが違うとhuskyは書き方結構変わるので注意

pre-commitフックを作成

npx husky init && echo "npx lint-staged --shell " > .husky/pre-commit

lint-stagedの設定ファイルを作成

lint-staged.config.js

module.exports = {
    '*.{ts,tsx}': (fileNames) => [
        `tsc --strict --noEmit ${fileNames.join(' ')}`,
        'eslint --cache --fix',
    ],
}

ルートを更新したとき自動でschemaファイルを生成

laravelのroutesディレクトリ以下に変更があった場合、自動でschema.d.tsファイルを更新する

lint-staged.config.js

require('dotenv').config()

const url = process.env.APP_URL

module.exports = {
    '*.{ts,tsx}': (fileNames) => [
        `tsc --strict --noEmit ${fileNames.join(' ')}`,
        'eslint --cache --fix',
    ],
    './routes/*.php': [ // このブロックを追加
        `npx openapi-typescript ${url}/docs/api.json --output  resources/ts/types/schema.d.ts`,
        'git add resources/ts/types/schema.d.ts',
    ],
}