Upgrade to Pro — share decks privately, control downloads, hide ads and more …

tsconfig options best5

Yosuke Kurami
December 18, 2020
260

tsconfig options best5

Yosuke Kurami

December 18, 2020
Tweet

Transcript

  1. Զͷ޷͖ͳ
    tsconfigͷΦϓγϣϯ
    100બ
    Quramy

    View full-size slide

  2. ࣌ؒͳ͍͠5ݸ͘Β͍
    ʹ͢ΔͶ

    View full-size slide

  3. Զͷ޷͖ͳ
    tsconfigͷΦϓγϣϯ
    100 5બ
    Quramy

    View full-size slide

  4. 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

    View full-size slide

  5. 4Ґ: --init
    - ਖ਼֬ʹ͸ tsc ͷΦϓγϣϯ
    - ίϝϯτ෇͖Ͱtsconfig.jsonͷ਽ܗΛు͍ͯ͘Εͯศར
    - Ͳͧ͜ͷne○t.jsͱ͕ͪͬͯɺͪΌΜͱ strict: true
    - ͍·ͩʹtarget͕es5ͳͷ͕ۄʹΩζ
    - npm i tsc -D; npx tsc --init -t es2019

    View full-size slide

  6. : noUnusedParameters
    - https://www.typescriptlang.org/tsconfig#noUnusedParameters
    - ୭΋ར༻͍ͯ͠ͳ͍ม਺͕͋ΔͱΤϥʔʹͯ͘͠ΕΔ܅
    - ESLintͷ no-unused-vars ϧʔϧͱಉ͕ͩ͡ɺ͋ͬͪ͸ׂͱbuggy
    - ͳ͔ͥ@typescript-eslintͰ no-unused-vars͕override͞Ε͍ͯΔ͕ɺ
    eslintͷதͷਓʹ΋ʮ͜Ε͍Βͳ͘Ͷʁૉ௚ʹtsʹ೚ͤΓΌ͍͍͡Ό
    ΜʯͱݴΘΕ͍ͯΔ΄Ͳ

    View full-size slide

  7. : plugins
    - https://www.typescriptlang.org/tsconfig#plugins
    - Language Service(tsserver) ʹproxyΛඃ͢͜ͱ͕Ͱ͖Δ
    - Angular΍GraphQLͳͲɺ.ts͔Β͞ΒʹผͷςϯϓϨʔτݴޠΛѻ͏έʔε
    ͰͷDXΛര্͛Ͱ͖ΔՄೳੑΛൿΊ͍ͯΔ
    - ↓ͷΑ͏ʹద౰ͳnpmύοέʔδΛࢦఆͯ͠࢖͏
    - “plugins”: [ { “name”: “typescript-styled-plugin” }],
    - ͪͳΈʹެࣜͰ঺հ͞Ε͍ͯΔpluginͷ50 %͸ Quramy࡞

    View full-size slide

  8. ө͑͋Δ1Ґ!
    ͷલʹ…

    View full-size slide

  9. (ฃಆ৆1): --generateTrace
    - ·͔͞ͷ undocumented ͩͬͨͷͰબ֎ʹͨ͠
    - ͪͳΈʹɺ͜Ε΋ਖ਼֬ʹ͸CLIͷΦϓγϣϯ
    - tsc͕ॏ͍ͨͱ͖ʹCPUϓϩϑΝΠϧΛͱΔͨΊͷ΍ͭ(Chrome devtool
    Ͱ։͍ͯ֬ೝ͢Δ)
    - V8ͷੜprofileΛు͘ generateCpuProfile ͸શવ࢖͍෺ʹͳΒͳ͍͕ɺ
    generateTrace ͷ݁Ռ͸compiler͕ద੾ʹtrace eventʹϥϕϧΛ෇༩͠
    ͍ͯΔͨΊಡΈ΍͍͢

    View full-size slide

  10. (ฃಆ৆2): transpileOnly
    - tsconfigʹॻ͚͘ͲTypeScriptͷΦϓγϣϯͰ͸ͳ͍ͷͰબ֎ɻ
    - ts-node ΍ ts-loader (webpack) ͸͜ͷΦϓγϣϯ͕͋Δͱɺtype check
    Λ͠ͳ͘ͳΔ (७ਮʹτϥϯεύΠϧʹప͢ΔͷͰɺͪΐͬͱͨ͠type
    errorͰࢭ·Δ͜ͱ͕ͳ͘ͳΔ)

    View full-size slide

  11. : incremental
    - https://www.typescriptlang.org/tsconfig#incremental
    - ໊લͷ௨Γɺ૿෼Ϗϧυ͢Δͯ͘͠ΕΔ܅
    - tsconfig.buildinfo ͱ͍͏ϑΝΠϧ͕࡞ΒΕɺίΠπ͕νΣοΫ݁ՌͷΩϟο
    γϡͷ໾ׂΛՌͨ͢ (typecheckerͷ݁ՌΛdumpͯ͠ΔΠϝʔδ)
    - ϩʔΧϧͰͷtsc͕ΊͪΌͪ͘Ό଎͘ͳΔɻCIͰ΋ύΠϓϥΠϯΛލ͍Ͱ͜ͷ
    ϑΝΠϧΛΩϟογϡʹ࢒͢ͱ͔ͳΓޮ͘
    - Ҏલ͸noEmitͱ૊Έ߹ΘͤΔͱಈ͔ͳ͔͚ͬͨͲɺv4.0Ͱซ༻Մೳʹɻ
    webpackͳͲɺ࣮ϑΝΠϧͷemitΛผͷCLIͰ΍͍ͬͯͯ΋࢖͍΍͘͢ͳͬͨ

    View full-size slide