tsconfig.jsonを完全に理解する

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