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

tsconfig.jsonを完全に理解する

pco2699
October 08, 2019

 tsconfig.jsonを完全に理解する

pco2699

October 08, 2019
Tweet

More Decks by pco2699

Other Decks in Programming

Transcript

  1. Completely understand
    tscon g.json
    @pco2699
    Ginza.js#5 @ Plaid
    1

    View Slide

  2. Self Introduction
    Self Introduction
    Kazuyuki Takayama
    Twitter: @pco2699
    Like: TypeScript
    2

    View Slide

  3. Content
    Content
    tscon g.jsonの中⾝を解説する
    3

    View Slide

  4. Goal
    Goal
    雰囲気で理解している⼈が
    tscon g.jsonを完全に理解する
    4

    View Slide

  5. TypeScript Version
    TypeScript Version
    TypeScript 3.6準拠
    コンパイラオプションは追加/変化するので注意
    困ったら公式を参照︕
    5

    View Slide

  6. What is tsconfig.json
    What is tsconfig.json
    TypeScriptのプロジェクトに置かれる設定ファイル
    主にTypeScriptのコンパイラオプションを設定する
    6

    View Slide

  7. example - tsconfig.json
    example - tsconfig.json
    {
    "compilerOptions": {
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "outFile": "../../built/local/tsc.js",
    },
    "include": [
    "src/**/*"
    ],
    "exclude": [
    "node_modules",
    "**/*.spec.ts"
    ]
    }
    7

    View Slide

  8. コンパイル対象指定
    コンパイル対象指定
    les
    exclude
    include
    プロジェクト分割
    プロジェクト分割
    references/extends
    IDE
    IDE
    typeAcquisition
    compileOnSave
    コンパイラオプション
    コンパイラオプション

    View Slide

  9. compilerOptions
    8

    View Slide

  10. コンパイル対象指定
    コンパイル対象指定
    les
    exclude
    include
    tscでコンパイルする対象を指定する
    9 . 1

    View Slide

  11. files
    files
    lesは個別にコンパイル対象を指定
    {
    "files": [
    "core.ts",
    "sys.ts",
    "types.ts"
    ]
    }
    9 . 2

    View Slide

  12. include/exclude
    include/exclude
    include/excludeはglobで対象・対象外を指定
    {
    "include": [
    "src/**/*"
    ],
    "exclude": [
    "node_modules",
    "**/*.spec.ts"
    ]
    }
    9 . 3

    View Slide

  13. プロジェクト分割
    プロジェクト分割
    references/extends
    10 . 1

    View Slide

  14. references/extends
    references/extends
    tscon g.jsonを⼩さいプロジェクトに分割して  
    管理できるようにする
    10 . 2

    View Slide

  15. project structure
    project structure
    ./home
    ├── tsconfig-base.json
    ├── src
    │ └── tsconfig.json
    └── test # srcの型やソースコードに依存している
    └── tsconfig.json
    10 . 3

    View Slide

  16. home/tsconfig.json
    home/tsconfig.json
    ベースとなる設定を記載 (基底クラスのような働き)
    {
    "compilerOptions": {
    ...
    }
    }
    10 . 4

    View Slide

  17. src/tsconfig.json
    src/tsconfig.json
    参照されるtscon g.jsonにはcompositeをつける
    {
    "extends": "../tsconfig-base.json",
    "compilerOptions": {
    // compiler options
    "composite": true
    }
    }
    10 . 5

    View Slide

  18. test/tsconfig.json
    test/tsconfig.json
    referencesで参照する。
    {
    "extends": "../tsconfig-base.json",
    "references": [
    { "path": "../src" }
    ]
    }
    10 . 6

    View Slide

  19. testを動かす際は、--buildでsrcをビルドする
    $ tsc --build src
    10 . 7

    View Slide

  20. IDE
    IDE
    typeAcquision
    compileOnSave
    11 . 1

    View Slide

  21. typeAcquision
    typeAcquision
    import時に、型ファイルをIDEが⾃動取得するか
    import React from 'react'; // reactの型ファイルを自動取得
    11 . 2

    View Slide

  22. compileOnSave
    compileOnSave
    tscon g.jsonを保存時にtsファイルをコンパイルし直
    すか
    {
    "compileOnSave": true
    }
    11 . 3

    View Slide

  23. コンパイラオプション
    コンパイラオプション
    compilerOptions
    コンパイラオプションは⾮常に多い(85個)
    デフォルトのtscon g.jsonでtrueのものだけ説明
    12

    View Slide

  24. $ tsc --init
    {
    "compilerOptions": {
    "target": "es5", // コンパイル後のJSのバージョン
    "module": "commonjs", // コンパイル後のimport/export方式
    "strict": true,
    "esModuleInterop": true
    }
    }
    13

    View Slide

  25. strictオプション
    strictオプション
    次のオプションをすべてONにする
    noImplicitAny
    noImplicitThis
    alwaysStrict
    strictBindCallApply
    strictNullChecks
    strictFunctionTypes
    strictPropertyInitialization
    14 . 1

    View Slide

  26. strictで怒られる簡単なコード
    strictで怒られる簡単なコード
    const hoge = (input) => { // noImplicitAny error
    console.log(input);
    }
    hoge(1);
    const piyo: number = null; // strictNullChecks error
    14 . 2

    View Slide

  27. その他
    その他
    alwaysStrict: JSの use strictモードを有効化
    strictBindCallApply: call,apply,bindも型チェック
    noImplicitThis: 暗黙のthis引き渡しを禁⽌
    strictFunctionTypes: 関数引数の双変性を無効
    strictPropertyInitialization: プロパティ初期化必須
    14 . 3

    View Slide

  28. esModuleInterop
    15 . 1

    View Slide

  29. Interoperability of CommonJS <=> ES6 Module
    Interoperability: 相互運⽤性
    15 . 2

    View Slide

  30. CommonJs import/export
    CommonJs import/export
    // export
    const hoge = () => {
    // ...some func
    }
    exports = hoge
    // import
    const moment = require("hoge");
    moment();
    15 . 3

    View Slide

  31. ES6 Module import/export
    ES6 Module import/export
    // export
    export const hoge = () => {
    // ...some func
    };
    // import
    import { hoge } from 'hoge';
    hoge();
    15 . 4

    View Slide

  32. export: CommonJs import: ES6 Module
    export: CommonJs import: ES6 Module
    esmoduleInterop: false
    esmoduleInterop: false
    esmoduleInterop: true
    esmoduleInterop: true
    import * as hoge from './hoge'
    hoge(); // *を呼び出すのはES6 Moduleの規約NG
    // CommonJSをdefault importでimportできる
    import hoge from './hoge'
    hoge(); // ES6 Module準拠
    15 . 5

    View Slide

  33. その他は を参照しましょう。
    公式資料
    15 . 6

    View Slide

  34. まとめ
    まとめ
    tscon g.jsonを完全に理解した
    次回は「コンパイラオプションを完全に理解する」
    を40分かけてやりたい
    16
     

    View Slide