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
420
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
tsconfig options best5
Yosuke Kurami
December 18, 2020
More Decks by Yosuke Kurami
See All by Yosuke Kurami
TypeScript LSP の今までとこれから
quramy
1
2.2k
フロントエンドテストの育て方
quramy
12
3.9k
App Router 悲喜交々
quramy
8
760
上手に付き合うコンポーネントテスト
quramy
6
2.4k
Patched fetch did not work
quramy
6
810
GraphQL あるいは React における自律的なデータ取得について
quramy
18
6k
Next.js App Router
quramy
15
4k
Fragment Composition of GraphQL
quramy
17
4.9k
reg-viz VRT tools
quramy
4
1.8k
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
356
21k
The Pragmatic Product Professional
lauravandoore
37
7.4k
The Power of CSS Pseudo Elements
geoffreycrofte
82
6.5k
A Soul's Torment
seathinner
7
3.6k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
11
1k
Sam Torres - BigQuery for SEOs
techseoconnect
PRO
0
540
Optimising Largest Contentful Paint
csswizardry
37
3.9k
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
aleyda
1
2.2k
Designing Powerful Visuals for Engaging Learning
tmiket
1
530
Kristin Tynski - Automating Marketing Tasks With AI
techseoconnect
PRO
0
510
Applied NLP in the Age of Generative AI
inesmontani
PRO
4
2.4k
Statistics for Hackers
jakevdp
799
230k
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Ͱ͍͍ͬͯͯ͘͢ͳͬͨ