モノレポにおけるTypeScript
モノレポでTypeScriptを使用するには、リンターとして、またはビルドツールとして、2つの方法があります。
このセクションでは、TypeScriptのリンターとしての役割について説明します。これは、TypeScriptがファイルの出力を行わないようにする（noEmit (新しいタブで開きます)）場合であり、ソースコードの型チェックにのみ使用する場合です。
tsconfig.jsonの共有
巧妙なソリューションを使って、リポジトリ全体でTypeScriptの設定ファイルを共有できます。基本的なtsconfig.jsonファイルを単一のワークスペースに配置し、アプリのtsconfig.jsonファイルからそれらをextendすることができます。
このようなワークスペースを想像してみましょう。
apps
├─ docs
│ ├─ package.json
│ ├─ tsconfig.json
├─ web
│ ├─ package.json
│ ├─ tsconfig.json
packages
├─ tsconfig
│ ├─ base.json
│ ├─ nextjs.json
│ ├─ package.json
│ ├─ react-library.json私たちのtsconfigパッケージ
packages/tsconfig内には、TypeScriptを構成するさまざまな方法を表すいくつかのjsonファイルがあります。それぞれが次のようになります。
{
"$schema": "https://json.schemastore.org/tsconfig",
"display": "Default",
"compilerOptions": {
"esModuleInterop": true,
"skipLibCheck": true,
"target": "es2022",
"resolveJsonModule": true,
"isolatedModules": true,
"moduleDetection": "force",
"strict": true,
"noUncheckedIndexedAccess": true,
"moduleResolution": "Bundler",
"module": "ESNext",
"noEmit": true,
"lib": ["es2022", "dom", "dom.iterable"],
},
"exclude": ["node_modules"]
}package.json内では、単にパッケージの名前を指定します。
{
"name": "tsconfig"
}リポジトリ内の他のjsonファイルは、単純なインポートでアクセスできます。
import baseJson from "tsconfig/base.json";
import nextjsJson from "tsconfig/nextjs.json";
import reactLibraryJson from "tsconfig/react-library.json";これにより、さまざまな種類のプロジェクトに対して異なる設定をエクスポートできます。
tsconfigパッケージの使い方
共有tsconfigを使用する各アプリ/パッケージは、最初にそれを依存関係として指定する必要があります。
{
"dependencies": {
"tsconfig": "*"
}
}次に、それらは**独自のtsconfig.json内でそれを拡張**できます。
{
// We extend it from here!
"extends": "tsconfig/nextjs.json",
// You can specify your own include/exclude
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"]
}概要
この設定は、新しいモノレポを作成する際にnpx create-turbo@latestを使用すると、デフォルトで提供されます。基本的な例 (新しいタブで開きます)を見て、動作中のバージョンを確認することもできます。