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
3.8k
tsconfig.jsonの最近の新機能 ファイルパス編
2024-10-02 Vue Fes Japan × TSKaigi 合同イベント「次世代フロントエンドツールチェイン」
uhyo
October 02, 2024
Tweet
Share
More Decks by uhyo
See All by uhyo
更新系と状態
uhyo
5
1.1k
React 19アップデートのために必要なこと
uhyo
8
1.9k
color-scheme: light dark; を完全に理解する
uhyo
8
570
React 19 + Jotaiを試して気づいた注意点
uhyo
9
3.1k
TypeScriptの次なる大進化なるか!? 条件型を返り値とする関数の型推論
uhyo
3
3k
非同期処理を活用しながらRust製wasmとJSを連携する方法(wasm-bindgenを使いたくない人向け)
uhyo
4
4.4k
tsconfig.jsonの設定を見直そう!フロントエンド向け 2024夏
uhyo
26
11k
React 19を概念から理解する
uhyo
22
11k
require(ESM)とECMAScript仕様
uhyo
7
2.4k
Other Decks in Programming
See All in Programming
Amazon CloudWatchの地味だけど強力な機能紹介!
itotsum
0
150
Memory API : Patterns, Performance et Cas d'Utilisation
josepaumard
0
130
AWSで雰囲気でつくる! VRChatの写真変換ピタゴラスイッチ
anatofuz
0
150
AHC045_解説
shun_pi
0
530
The Implementations of Advanced LR Parser Algorithm
junk0612
1
280
Rollupのビルド時間高速化によるプレビュー表示速度改善とバンドラとASTを駆使したプロダクト開発の難しさ
plaidtech
PRO
1
170
これだけは知っておきたいクラス設計の基礎知識 version 2
masuda220
PRO
24
6.3k
Vibe Codingをせずに Clineを使っている
watany
17
6.2k
リストビュー画面UX改善の振り返り
splcywolf
0
140
RubyKaigi Dev Meeting 2025
tenderlove
1
130
「影響が少ない」を自分の目でみてみる
o0h
PRO
2
1.1k
Dissecting and Reconstructing Ruby Syntactic Structures
ydah
0
640
Featured
See All Featured
Done Done
chrislema
183
16k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
30k
Designing Experiences People Love
moore
141
24k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.4k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Side Projects
sachag
452
42k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Automating Front-end Workflow
addyosmani
1369
200k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.4k
The Invisible Side of Design
smashingmag
299
50k
Producing Creativity
orderedlist
PRO
344
40k
Building Flexible Design Systems
yeseniaperezcruz
329
38k
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