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
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
Visual Storytelling: How to be a Superhuman Communicator
reverentgeek
2
640
How STYLIGHT went responsive
nonsquared
100
6.3k
Mobile First: as difficult as doing things right
swwweet
225
10k
What's in a price? How to price your products and services
michaelherold
247
13k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
35
2.8k
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
techseoconnect
PRO
0
640
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
3k
Neural Spatial Audio Processing for Sound Field Analysis and Control
skoyamalab
0
440
ラッコキーワード サービス紹介資料
rakko
1
4.7M
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
360
30k
Claude Code どこまでも/ Claude Code Everywhere
nwiizo
67
57k
Navigating the moral maze — ethical principles for Al-driven product design
skipperchong
2
510
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Ͱ͍͍ͬͯͯ͘͢ͳͬͨ