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 options best5
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Yosuke Kurami
December 18, 2020
0
390
tsconfig options best5
Yosuke Kurami
December 18, 2020
Tweet
Share
More Decks by Yosuke Kurami
See All by Yosuke Kurami
TypeScript LSP の今までとこれから
quramy
1
1.5k
フロントエンドテストの育て方
quramy
12
3.7k
App Router 悲喜交々
quramy
8
680
上手に付き合うコンポーネントテスト
quramy
6
2.3k
Patched fetch did not work
quramy
6
750
GraphQL あるいは React における自律的なデータ取得について
quramy
18
5.7k
Next.js App Router
quramy
15
3.8k
Fragment Composition of GraphQL
quramy
17
4.5k
reg-viz VRT tools
quramy
4
1.6k
Featured
See All Featured
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
ryanjones
0
53
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4.1k
What Being in a Rock Band Can Teach Us About Real World SEO
427marketing
0
170
Speed Design
sergeychernyshev
33
1.5k
The Language of Interfaces
destraynor
162
26k
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
59
42k
Prompt Engineering for Job Search
mfonobong
0
150
The Straight Up "How To Draw Better" Workshop
denniskardys
239
140k
Music & Morning Musume
bryan
47
7.1k
Visualization
eitanlees
150
17k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
How Software Deployment tools have changed in the past 20 years
geshan
0
31k
Transcript
Զͷ͖ͳ tsconfigͷΦϓγϣϯ 100બ Quramy
࣌ؒͳ͍͠5ݸ͘Β͍ ʹ͢ΔͶ
Զͷ͖ͳ tsconfigͷΦϓγϣϯ 100 5બ Quramy
5Ґ: references - https://www.typescriptlang.org/tsconfig#references - ͋ΔtsconfigԼͷϓϩδΣΫτ͔ΒɺผͷtsconfigԼͷϓϩδΣΫτ Λࢀর͢Δػೳ - ύοέʔδؒͷGo to
DefinitionͳͲɺϞϊϨϙΔͱ͖ʹศར (pathsͰࣅͨΑ͏ͳ͜ͱ͕Ͱ͖͚ͨͲɺreferencesͷํ͕ΑΓ͍ʣ - npm v7 ͷ workspaces ͱΈ߹ΘͤΔͱڧ͍ - ࢀߟ: https://github.com/Quramy/npm-ts-workspaces-example
4Ґ: --init - ਖ਼֬ʹ tsc ͷΦϓγϣϯ - ίϝϯτ͖Ͱtsconfig.jsonͷܗΛు͍ͯ͘Εͯศར - Ͳͧ͜ͷne◦t.jsͱ͕ͪͬͯɺͪΌΜͱ
strict: true - ͍·ͩʹtarget͕es5ͳͷ͕ۄʹΩζ - npm i tsc -D; npx tsc --init -t es2019
: noUnusedParameters - https://www.typescriptlang.org/tsconfig#noUnusedParameters - ୭ར༻͍ͯ͠ͳ͍ม͕͋ΔͱΤϥʔʹͯ͘͠ΕΔ܅ - ESLintͷ no-unused-vars ϧʔϧͱಉ͕ͩ͡ɺׂ͋ͬͪͱbuggy
- ͳ͔ͥ@typescript-eslintͰ no-unused-vars͕override͞Ε͍ͯΔ͕ɺ eslintͷதͷਓʹʮ͜Ε͍Βͳ͘ͶʁૉʹtsʹͤΓΌ͍͍͡Ό ΜʯͱݴΘΕ͍ͯΔ΄Ͳ
: plugins - https://www.typescriptlang.org/tsconfig#plugins - Language Service(tsserver) ʹproxyΛඃ͢͜ͱ͕Ͱ͖Δ - AngularGraphQLͳͲɺ.ts͔Β͞ΒʹผͷςϯϓϨʔτݴޠΛѻ͏έʔε
ͰͷDXΛര্͛Ͱ͖ΔՄೳੑΛൿΊ͍ͯΔ - ↓ͷΑ͏ʹదͳnpmύοέʔδΛࢦఆͯ͠͏ - “plugins”: [ { “name”: “typescript-styled-plugin” }], - ͪͳΈʹެࣜͰհ͞Ε͍ͯΔpluginͷ50 % Quramy࡞
ө͑͋Δ1Ґ! ͷલʹ…
(ฃಆ1): --generateTrace - ·͔͞ͷ undocumented ͩͬͨͷͰબ֎ʹͨ͠ - ͪͳΈʹɺ͜Εਖ਼֬ʹCLIͷΦϓγϣϯ - tsc͕ॏ͍ͨͱ͖ʹCPUϓϩϑΝΠϧΛͱΔͨΊͷͭ(Chrome
devtool Ͱ։͍ͯ֬ೝ͢Δ) - V8ͷੜprofileΛు͘ generateCpuProfile શવ͍ʹͳΒͳ͍͕ɺ generateTrace ͷ݁Ռcompiler͕దʹtrace eventʹϥϕϧΛ༩͠ ͍ͯΔͨΊಡΈ͍͢
(ฃಆ2): transpileOnly - tsconfigʹॻ͚͘ͲTypeScriptͷΦϓγϣϯͰͳ͍ͷͰબ֎ɻ - ts-node ts-loader (webpack) ͜ͷΦϓγϣϯ͕͋Δͱɺtype
check Λ͠ͳ͘ͳΔ (७ਮʹτϥϯεύΠϧʹప͢ΔͷͰɺͪΐͬͱͨ͠type errorͰࢭ·Δ͜ͱ͕ͳ͘ͳΔ)
: incremental - https://www.typescriptlang.org/tsconfig#incremental - ໊લͷ௨Γɺ૿Ϗϧυ͢Δͯ͘͠ΕΔ܅ - tsconfig.buildinfo ͱ͍͏ϑΝΠϧ͕࡞ΒΕɺίΠπ͕νΣοΫ݁ՌͷΩϟο γϡͷׂΛՌͨ͢
(typecheckerͷ݁ՌΛdumpͯ͠ΔΠϝʔδ) - ϩʔΧϧͰͷtsc͕ΊͪΌͪ͘Ό͘ͳΔɻCIͰύΠϓϥΠϯΛލ͍Ͱ͜ͷ ϑΝΠϧΛΩϟογϡʹ͢ͱ͔ͳΓޮ͘ - ҎલnoEmitͱΈ߹ΘͤΔͱಈ͔ͳ͔͚ͬͨͲɺv4.0Ͱซ༻Մೳʹɻ webpackͳͲɺ࣮ϑΝΠϧͷemitΛผͷCLIͰ͍͍ͬͯͯ͘͢ͳͬͨ