共通のtypescriptの型をフロントエンドとバックエンドで使う

はじめに

フロントエンドとバックエンドでtypescriptを使っていると、リクエストやレスポンスの型を共有したくなります。
別々で型を管理すると、面倒なコピペをするハメになったり、ミスって不整合が起きたりするので大変ですよね。
そこで、一箇所に型を置いて、一回の変更でどちらにも変更が適用されるようにします。

1. プロジェクトをモノレポにする

型情報が即時に反映されるように、プロジェクトを一つにまとめます。

ディレクトリ構成の例

/api
/common/requests
/web

2. 型だけを定義したパッケージを作る

型パッケージは最低限package.jsonとindex.d.tsがあれば大丈夫です。

/common/requests/package.json

{
  "name": "@types/your-requests",
  "version": "1.0.0",
  "description": "",
  "main": "",
  "types": "index.d.ts",
  "author": "",
  "license": "UNLICENSED"
}

/common/requests/index.d.ts

export type SampleRequestBody = {id: string; amount: number};

3. 型へのシンボリックリンクを張る

普通のローカルパッケージのインストールではなく、シンボリックリンクを使います。
これだと型情報を変更するたびにインストールをしなくてもよくなります。

yarnを使った例

cd api
yarn add link:../common/requests

cd ../web
yarn add link:../common/requests

これで、型情報の編集がそれぞれのパッケージに伝わるようになります。