tsconfig.jsonの最近の新機能　ファイルパス編

tsconfig.jsonの最近の新機能ファイルパス編 2024-10-02 Vue Fes Japan × TSKaigi 合同イベント「次世代フロントエンドツールチェイン」

発表者紹介 uhyo 株式会社カオナビフロントエンドエキスパート普段はTypeScriptとかReactをやっている。好きなViteのオプションは { json: { stringify:
true } } （デフォルトtrueにしてくれ） 2

tsconfig.json TypeScriptのコンパイラオプション等を記述したファイル。 tscやエディタ等から参照される。 tsc --initによって作成できる。 Vite等が勝手に用意してくれる場合もある。 3

tsconfig.jsonの隠された機能このトークでは、TypeScript 5.5 で追加されていた ${configDir} 機能を紹介。また、この機能が活用されるProject References についても復習します。
4

Project References 5

Project References Project Referencesは、複数のtsconfig.jsonの間に依存関係を定義できる機能。 1つのコードベース内で、ファイルによってコンパイラオプションを使い分けたい場合にも使われる。 6

Project References × Vite Viteのテンプレートにも使われている。 7 ← npm create vite@latest
で React + TSプロジェクトを作った直後のファイル構成。何かtsconfig.jsonが3つある……

Project References × Vite 8 tsconfig.json tsconfig.app.json tsconfig.node.json メインの tsconfig.json
は、他の2つを参照するだけ。実際の設定は tsconfig.app.json と tsconfig.node.json に書かれている。

Project References × Vite src以下のファイルはReact向けのコンパイラオプションを適用し、 Viteの設定ファイルはNode.js向けのコンパイラオプション適用する設定になっている。 tsconfig.app.json “include”:
[“src”] tsconfig.node.json “include”: [“vite.config.ts”] 9

Solution Style このようにtsconfig.jsonが Project Referenceしかしないやり方のことを Solution Style と呼ぶ。 VSCode等は
tsconfig.json を読み込むので、そこを始点にして他のtsconfigを読み込んでもらうことができる。 10 tsconfig.json

extendsの活用 Solution Styleを使って複数tsconfigを併用する際に、一部設定を共通化したくなる。そのためには extends を使う。 11

extendsの活用 ※ 画像はイメージです。実際のViteの設定とは異なります。 12 tsconfig.json tsconfig.app.json tsconfig.node.json Solution Style tsconfig.base.json
extends extends

extendsの活用 Solution Style以外にも、モノレポの複数パッケージで共通設定を書くのにも使われがち。 tsconfig.base.json “compilerOptions”: { … } packages/foo/tsconfig.json
“extends”: “../../tsconfig.base.json” 13

本題: ${configDir} 14

${configDir}とは tsconfig.json内で、パスを指定するオプション内で使える変数（のようなもの）。特にextendsを使う際に有用。 ${configDir}はtsconfig.jsonがあるディレクトリを指す。 15

${configDir}を使う使わない書き方 “outDir”: “./dist” 使う書き方 “outDir”: “${configDir}/dist” この2つは、extendsを使わない場合は同じ意味になる。 16

${configDir}とextends tsconfig.base.json “outDir”: “./dist” “outDir”: “${configDir}/dist” この場合、相対パスと${configDir}で意味が変わる。 • 相対パス: tsconfig.base.jsonからのパスになる
• ${configDir}: packages/foo/tsconfig.json からのパスになる 17 extends packages/foo/tsconfig.json “extends”: “../../tsconfig.base.json”

${configDir}の活用複数パッケージ間の共通化などのユースケースでは、相対パスはextends元ではなくextends先からの相対パスとなったほうが便利な場合もある。 ${configDir}はその場合に有用で、従来よりも共通化の幅が広がったと言える。 “outDir”: “${configDir}/dist” 18

${configDir}の活用ファイルパスを受け付けるオプションでは${configDir} が利用可能。 outDir, paths, includeなどを共通化すれば、同じような構成のプロジェクトがたくさんあるときに管理が楽になる。 19

まとめ複数のtsconfigを使い分けることは、複雑なプロジェクト内でも妥協せず TSを設定するために有効である。 TS 5.5で導入された${configDir}は、従来より多くの共通化を可能にしてくれる。 20

tsconfig.jsonの最近の新機能　ファイルパス編

tsconfig.jsonの最近の新機能　ファイルパス編

uhyo

More Decks by uhyo

Other Decks in Programming

Featured

Transcript