TypeScript 3.0 の Project reference(プロジェクト参照) やってみた

#TypeScript#JavaScript
Posted on 2018/07/31 00:00:00(+9:00)

TypeScript 3.0 がリリースされました。

追加機能のひとつ、Project references は、ちょうど仕事で「どうするのがいいの？」と迷ってたところだったので、さっそくやってみました。

話としてはよくある、 複数のプロジェクトから参照される "共通プロジェクト" の在り方 です。

Project Reference 適用以前

Project Reference 適用前（つまり現状）は、次のような構成になっていました（説明簡略化のため、client -> shared のみを書いてますが serverside からも shared を参照しています）。

root
├── client
│   ├── tsconfig.json
│   └── src
│       └── main.ts
└── shared
    └── src
        └── calc.ts

shared の calc.ts

export function calcAdd(x: number, y: number): number {
    return x + y;
}

client の main.ts

import { calcAdd } from '../../shared/src/calc';

console.log(calcAdd(1, 2)); // = 3

client の tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true
  }
}

shared/ 配下 は ただのファイル置き場 で、client から相対パスで calc.ts を参照しているに過ぎません。

これを tsc -b client/tsconfig.json した結果は次のようになります。

root
├── dist
│   ├── client
│   │   └── src
│   │       └── main.js
│   └── shared
│       └── src
│           └── calc.js
├── client
│    └─-
└── shared
     └─-

これはイケてないと思いつつ開発してきましたが、これを Project reference に変えてみます。

Project reference 適用後

ではプロジェクト参照を使ってみます。TypeScript Version 3.0.1 で試しています。

まず、 shared/ をプロジェクト化するために tsc --init で tsconfig.json を作り、内容を次のようにします。

shared の tsconfig.json

{
  "compilerOptions": {
    // tsc --init で既定で設定されてた項目
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,

    // あとから追加した項目
    "outDir": "../dist/shared",
    "rootDir": "./src",
    "composite": true,
    "declaration": true,
  }
}

"composite": true がプロジェクト参照のために必要な項目で、"declaration": true は、型定義ファイルを出力するために必要です(よね？)。outDir と rootDir は出力される .js ファイルの場所を調整するために設定しました。

次に client 側の tsconfig.json を修正します。

client の tsconfig.json

{
  "compilerOptions": {
    // tsc --init で既定で設定されてた項目
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,

    // あとから追加した項目
    "outDir": "../dist/client",
    "rootDir": "./src",

    // さらに追加した相対パス地獄を防ぐための項目
    "baseUrl": "./",
    "paths": {
      "shared/*": [
        "../dist/shared/*"
      ]
    }
  },
  // あとから追加した項目
  "references": [
    { "path": "../shared" }
  ]
}

こちらには、 "references" を追加し、shared への参照を設定します。これがプロジェクト参照のメインですね。

baseUrl と paths は、 "relative path hell" を回避するための設定です。

を見てやってみました。

最後に、client の main.ts の import 文を書き換えます。

client の main.ts

import { calcAdd } from 'shared/calc';

console.log(calcAdd(1, 2)); // = 3

import は、shared プロジェクトのビルド結果である ./dist/shared を参照するようにしますが、 先に baseUrl と paths で shared/* に ../dist/shared/* をマッピングさせているので、ここでは from 'shared/calc' だけで済みます。

ではビルドしてみましょう。

tsc -b client/tsconfig.json

を実行します。ポイントは、shared もプロジェクトなのにそれは含めていない、ということです。

ビルド結果を含むディレクトリ全体は次のようになります。

root
├── client
│   ├── tsconfig.json
│   └── src
│       └── main.ts
├── shared
│   ├── tsconfig.json
│   └── src
│       └── calc.ts
└── dist
    ├── client
    │   └── main.js
    └── shared
        ├── calc.js
        └── calc.d.ts

なんだかそれっぽくなった気がします。 tsc -b client/tsconfig.json としたのに、プロジェクト参照に設定されている shared 側も（先に）ビルドされて dist/shared に出力されています。

client の tsconfig.json には "rootDir": "./src" を設定したので、好き勝手に別の親ディレクトリにある .ts ファイルを参照することができなくなり、秩序が守られる気がします。

冒頭の説明には、もっとたくさんのオプションについて説明がありますが、とりあえず以上です。