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
360
tsconfig options best5
Yosuke Kurami
December 18, 2020
Tweet
Share
More Decks by Yosuke Kurami
See All by Yosuke Kurami
フロントエンドテストの育て方
quramy
12
3.2k
App Router 悲喜交々
quramy
8
590
上手に付き合うコンポーネントテスト
quramy
6
2k
Patched fetch did not work
quramy
6
670
GraphQL あるいは React における自律的なデータ取得について
quramy
18
5.2k
Next.js App Router
quramy
15
3.5k
Fragment Composition of GraphQL
quramy
16
3.9k
reg-viz VRT tools
quramy
4
1.4k
NoInfer
quramy
0
280
Featured
See All Featured
Practical Orchestrator
shlominoach
187
11k
A better future with KSS
kneath
239
17k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
GitHub's CSS Performance
jonrohan
1031
460k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
How GitHub (no longer) Works
holman
314
140k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Why Our Code Smells
bkeepers
PRO
336
57k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2k
Site-Speed That Sticks
csswizardry
6
560
Typedesign – Prime Four
hannesfritz
41
2.6k
Fireside Chat
paigeccino
37
3.4k
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Ͱ͍͍ͬͯͯ͘͢ͳͬͨ