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
4k
tsconfig.jsonの最近の新機能 ファイルパス編
2024-10-02 Vue Fes Japan × TSKaigi 合同イベント「次世代フロントエンドツールチェイン」
uhyo
October 02, 2024
Tweet
Share
More Decks by uhyo
See All by uhyo
Next.jsと状態管理のプラクティス
uhyo
2
670
10ヶ月かけてstyled-components v4からv5にアップデートした話
uhyo
5
510
更新系と状態
uhyo
8
2.3k
React 19アップデートのために必要なこと
uhyo
8
2k
color-scheme: light dark; を完全に理解する
uhyo
8
620
React 19 + Jotaiを試して気づいた注意点
uhyo
9
3.2k
TypeScriptの次なる大進化なるか!? 条件型を返り値とする関数の型推論
uhyo
3
3.1k
非同期処理を活用しながらRust製wasmとJSを連携する方法(wasm-bindgenを使いたくない人向け)
uhyo
4
4.4k
tsconfig.jsonの設定を見直そう!フロントエンド向け 2024夏
uhyo
26
11k
Other Decks in Programming
See All in Programming
Rubyの!メソッドをちゃんと理解する
alstrocrack
1
250
ASP.NETアプリケーションのモダナイゼーションについて
tomokusaba
0
260
KANNA Android の技術的課題と取り組み
watabee
1
390
The New Developer Workflow: How AI Transforms Ideas into Code
danielsogl
0
120
note の Elasticsearch 更新系を支える技術
tchov
9
3.6k
カウシェで Four Keys の改善を試みた理由
ike002jp
1
130
大LLM時代にこの先生きのこるには-ITエンジニア編
fumiyakume
8
3.3k
インプロセスQAにおいて大事にしていること / In-process QA Meetup
medley
0
170
Storybookの情報をMCPサーバー化する
shota_tech
2
970
Boost Your Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
840
M5UnitUnified 最新動向 2025/05
gob
0
140
開発者フレンドリーで顧客も満足?Platformの秘密
algoartis
0
210
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
700
RailsConf 2023
tenderlove
30
1.1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
137
33k
It's Worth the Effort
3n
184
28k
The Cult of Friendly URLs
andyhume
78
6.3k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.7k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.6k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.5k
Navigating Team Friction
lara
185
15k
The Language of Interfaces
destraynor
158
25k
BBQ
matthewcrist
88
9.6k
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