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
2
360
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.8k
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
Micro Frontends for Java Microservices - dev2next 2024
mraible
PRO
0
130
Iteratorでページネーションを実現する
sonatard
3
690
Unlocking Python's Core Magic
leew
0
100
Делим тесты между QA и разработчиком
mariyasaygina
0
400
Progressive Web Apps for Rails developers
siaw23
2
500
個人開発のおいしさと続け方
3l4l5
0
230
フロントエンドの標準仕様をどう追っているか / How I follow the frontend standards specs
petamoriken
3
170
利用者視点で考える、イテレータとの上手な付き合い方
syumai
4
200
AWS CDKを用いたセキュアなCI/CDパイプラインの構築 / Build a secure CI/CD pipeline using AWS CDK
seike460
PRO
3
480
Flutterアプリを生成AIで生成する勘所
rizumita
0
230
Cohesion in Modeling and Design
mploed
3
170
推しの夫に恋のGPS「ときメーター」#M5Stack #IoT #M5JPTour2024
riyu
0
220
Featured
See All Featured
KATA
mclloyd
27
13k
GraphQLの誤解/rethinking-graphql
sonatard
65
9.8k
Building a Scalable Design System with Sketch
lauravandoore
458
32k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Making Projects Easy
brettharned
114
5.8k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
278
13k
A better future with KSS
kneath
235
17k
Fashionably flexible responsive web design (full day workshop)
malarkey
401
65k
What the flash - Photography Introduction
edds
67
11k
Gamification - CAS2011
davidbonilla
79
5k
GitHub's CSS Performance
jonrohan
1030
450k
For a Future-Friendly Web
brad_frost
174
9.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