モノレポセットアップで TypeScript を使用する方法

モノレポ設定により、複数のパッケージまたはプロジェクトを単一のリポジトリで管理できます。TypeScript では、この設定は、異なるパッケージ間で型、インターフェース、さらにはユーティリティを共有する場合に特に強力です。このガイドでは、モノレポ環境で TypeScript を設定する方法について説明します。

1. モノレポの設定

モノレポを設定するには、npm ワークスペースや yarn ワークスペースなどのツールを使用できます。これらのツールを使用すると、同じリポジトリ内の複数のパッケージを管理し、プロジェクト間でコードを簡単に共有できます。

1.1 モノレポの初期化

まず、モノレポ用の新しいフォルダーを作成し、npm または yarn で初期化します。

mkdir my-monorepo
cd my-monorepo
npm init -y

次に、package.json でワークスペースを構成します。

{
  "name": "my-monorepo",
  "version": "1.0.0",
  "private": true,
  "workspaces": [
    "packages/*"
  ]
}

この設定により、npm または yarn に、すべてのパッケージが packages フォルダー内に存在することが伝えられます。

2. モノレポへのパッケージの追加

モノレポに 2 つのパッケージを作成します。この例では、再利用可能なコード用の shared パッケージと、フロントエンドアプリケーション用の web-app パッケージを作成します。

mkdir -p packages/shared
mkdir -p packages/web-app

各パッケージ内で、package.json を初期化します。

cd packages/shared
npm init -y

cd ../web-app
npm init -y

3. モノレポにTypeScriptを追加する

次に、TypeScript を設定します。モノレポのルートに TypeScript と必要な依存関係をインストールします。

npm install typescript --save-dev

ルートレベルの tsconfig.json を作成して、モノレポ全体の TypeScript 構成を定義します。

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "*": ["packages/*/src"]
    },
    "composite": true,
    "declaration": true,
    "outDir": "dist",
    "rootDir": ".",
    "skipLibCheck": true,
    "module": "ESNext",
    "target": "ES6",
    "moduleResolution": "node"
  },
  "include": ["packages/*"]
}

ここで重要なのは paths オプションです。これにより、TypeScript はモノレポ内のさまざまなパッケージからのインポートを理解できるようになります。

4. 各パッケージでの TypeScript の設定

各パッケージがモノレポで適切に動作するには、独自の tsconfig.json が必要です。以下は shared パッケージの構成例です。

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "rootDir": "src",
    "outDir": "dist"
  },
  "include": ["src"]
}

web-app パッケージの場合:

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "rootDir": "src",
    "outDir": "dist"
  },
  "include": ["src"]
}

これで、各パッケージで TypeScript が使用できるようになり、ルートの tsconfig.json から構成が共有されるようになりました。

5. パッケージにTypeScriptコードを追加する

両方のパッケージにサンプルの TypeScript コードを追加してみましょう。 shared パッケージで、 src フォルダーを作成し、TypeScript ファイルを追加します。

mkdir -p packages/shared/src
touch packages/shared/src/index.ts

index.ts で、単純な関数をエクスポートします。

export const greet = (name: string): string => {
  return `Hello, ${name}!`;
}

web-app パッケージに、src フォルダーと index.ts ファイルを作成します。

mkdir -p packages/web-app/src
touch packages/web-app/src/index.ts

次に、共有関数をインポートします。

import { greet } from 'shared';

console.log(greet('TypeScript Monorepo'));

6. モノレポの構築

モノレポ内のすべての TypeScript コードをコンパイルするには、TypeScript コンパイラを使用する必要があります。モノレポのルートで、次のコマンドを実行します。

npx tsc --build

このコマンドは、それぞれの tsconfig.json ファイルに従ってすべてのパッケージをコンパイルします。

結論

このガイドでは、モノレポで TypeScript を設定して使用する方法について説明しました。モノレポ構造でコードを整理すると、複数のパッケージ間でコードを簡単に共有でき、開発プロセスを効率化できます。TypeScript の強力な型指定とプロジェクト参照により、この設定は大規模なアプリケーションや共有ライブラリに最適です。

typescript モノレポセットアップ tsconfig ワークスペース共有マルチパッケージコンパイラ npm yarn ビルドモジュール参照組織