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
Yosuke Kurami
December 18, 2020
0
370
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.2k
フロントエンドテストの育て方
quramy
12
3.6k
App Router 悲喜交々
quramy
8
650
上手に付き合うコンポーネントテスト
quramy
6
2.2k
Patched fetch did not work
quramy
6
720
GraphQL あるいは React における自律的なデータ取得について
quramy
18
5.5k
Next.js App Router
quramy
15
3.7k
Fragment Composition of GraphQL
quramy
16
4.2k
reg-viz VRT tools
quramy
4
1.5k
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
It's Worth the Effort
3n
187
28k
How to train your dragon (web standard)
notwaldorf
96
6.3k
How to Ace a Technical Interview
jacobian
280
24k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
189
55k
Documentation Writing (for coders)
carmenintech
75
5k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Side Projects
sachag
455
43k
Why Our Code Smells
bkeepers
PRO
339
57k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Optimizing for Happiness
mojombo
379
70k
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
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Ͱ͍͍ͬͯͯ͘͢ͳͬͨ