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
6
1.3k
tsconfig.jsonの最近の新機能 ファイルパス編
2024-10-02 Vue Fes Japan × TSKaigi 合同イベント「次世代フロントエンドツールチェイン」
uhyo
October 02, 2024
Tweet
Share
More Decks by uhyo
See All by uhyo
非同期処理を活用しながらRust製wasmとJSを連携する方法(wasm-bindgenを使いたくない人向け)
uhyo
4
3.3k
tsconfig.jsonの設定を見直そう!フロントエンド向け 2024夏
uhyo
24
7.9k
React 19を概念から理解する
uhyo
21
9.2k
require(ESM)とECMAScript仕様
uhyo
6
1.7k
TypeScript Quiz (Encraft #12 Frontend Quiz Night)
uhyo
8
1.6k
Shadow DOMとCSSの現状
uhyo
11
7k
TypeScriptってどんな言語? 言語そのものを知る面白さ
uhyo
16
8.8k
App Router時代のデータ取得アーキテクチャ
uhyo
48
15k
ステート管理を超えるRecoil運用の考え方
uhyo
15
12k
Other Decks in Programming
See All in Programming
Go製CLIツールGatling Commanderによる負荷試験実施の自動化
okmtz
3
630
為醫療加裝Python的引擎
cclai999
0
270
実践Dash - 手を抜きながら本気で作るデータApplicationの基本と応用 / Dash for Python and Baseball
shinyorke
2
210
WEBアプリケーションにおけるAWS Lambdaを用いた大規模な非同期処理の実践
delhi09
PRO
7
3.6k
全方位強化 Python 服務可觀測性:以 FastAPI 和 Grafana Stack 為例
blueswen
1
360
ECS向けのドリフト検知機構を実装してみた
tkikuc
0
260
Rails 8 Frontend: 10 commandments & 7 deadly sins in 2025
yshmarov
1
570
NANIMACHI
naokiito
0
930
The Efficiency Paradox and How to Save Yourself and the World
hollycummins
0
130
フロントエンドの標準仕様をどう追っているか / How I follow the frontend standards specs
petamoriken
2
170
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
inesmontani
PRO
3
1.1k
個人開発で使ってるやつを紹介する回
yohfee
1
620
Featured
See All Featured
How to Ace a Technical Interview
jacobian
275
23k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.9k
Art, The Web, and Tiny UX
lynnandtonic
295
20k
The Pragmatic Product Professional
lauravandoore
31
6.2k
Designing for humans not robots
tammielis
249
25k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.8k
Practical Orchestrator
shlominoach
185
10k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
5
210
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
26
4k
How to train your dragon (web standard)
notwaldorf
87
5.6k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
327
21k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
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