Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
tsconfig.jsonの最近の新機能 ファイルパス編
Search
uhyo
October 02, 2024
Programming
8
4.5k
tsconfig.jsonの最近の新機能 ファイルパス編
2024-10-02 Vue Fes Japan × TSKaigi 合同イベント「次世代フロントエンドツールチェイン」
uhyo
October 02, 2024
Tweet
Share
More Decks by uhyo
See All by uhyo
libsyncrpcってなに?
uhyo
0
550
Next.jsと状態管理のプラクティス
uhyo
7
7.4k
10ヶ月かけてstyled-components v4からv5にアップデートした話
uhyo
5
610
更新系と状態
uhyo
8
3.5k
React 19アップデートのために必要なこと
uhyo
8
2.5k
color-scheme: light dark; を完全に理解する
uhyo
8
680
React 19 + Jotaiを試して気づいた注意点
uhyo
9
3.5k
TypeScriptの次なる大進化なるか!? 条件型を返り値とする関数の型推論
uhyo
3
3.3k
非同期処理を活用しながらRust製wasmとJSを連携する方法(wasm-bindgenを使いたくない人向け)
uhyo
4
4.6k
Other Decks in Programming
See All in Programming
[SRE NEXT] 複雑なシステムにおけるUser Journey SLOの導入
yakenji
1
900
オホーツクでコミュニティを立ち上げた理由―地方出身プログラマの挑戦 / TechRAMEN 2025 Conference
lemonade_37
1
430
DataformでPythonする / dataform-de-python
snhryt
0
150
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
750
Dart 参戦!!静的型付き言語界の隠れた実力者
kno3a87
0
160
バイブスあるコーディングで ~PHP~ 便利ツールをつくるプラクティス
uzulla
1
320
Understanding Kotlin Multiplatform
l2hyunwoo
0
250
11年かかって やっとVibe Codingに 時代が追いつきましたね
yimajo
1
230
Claude Code派?Gemini CLI派? みんなで比較LT会!_20250716
junholee
1
800
MCP連携で加速するAI駆動開発/mcp integration accelerates ai-driven-development
bpstudy
0
250
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
yoshiyoshifujii
5
740
Google I/O Extended Incheon 2025 ~ What's new in Android development tools
pluu
1
220
Featured
See All Featured
Bash Introduction
62gerente
614
210k
Scaling GitHub
holman
461
140k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Embracing the Ebb and Flow
colly
86
4.8k
We Have a Design System, Now What?
morganepeng
53
7.7k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Designing for humans not robots
tammielis
253
25k
Adopting Sorbet at Scale
ufuk
77
9.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6k
Visualization
eitanlees
146
16k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Transcript
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