tsconfig.jsonを完全に理解する

Transcript

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

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

   2 

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

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

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

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

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 

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

   typeAcquisition compileOnSave コンパイラオプション コンパイラオプション 

9. compilerOptions 8 

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

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

    } 9 . 2 

12. include/exclude include/exclude include/excludeはglobで対象・対象外を指定 { "include": [ "src/**/*" ], "exclude": [

    "node_modules", "**/*.spec.ts" ] } 9 . 3 

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

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

15. project structure project structure ./home ├── tsconfig-base.json ├── src │

    └── tsconfig.json └── test # srcの型やソースコードに依存している └── tsconfig.json 10 . 3 

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

    10 . 4 

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

    compiler options "composite": true } } 10 . 5 

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

    "../src" } ] } 10 . 6 

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

20. IDE IDE typeAcquision compileOnSave 11 . 1 

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

    . 2 

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

    . 3 

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

24. $ tsc --init { "compilerOptions": { "target": "es5", // コンパイル後のJSのバージョン

    "module": "commonjs", // コンパイル後のimport/export方式 "strict": true, "esModuleInterop": true } } 13 

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

    14 . 1 

26. strictで怒られる簡単なコード strictで怒られる簡単なコード const hoge = (input) => { // noImplicitAny

    error console.log(input); } hoge(1); const piyo: number = null; // strictNullChecks error 14 . 2 

27. その他 その他 alwaysStrict: JSの use strictモードを有効化 strictBindCallApply: call,apply,bindも型チェック noImplicitThis: 暗黙のthis引き渡しを禁⽌

    strictFunctionTypes: 関数引数の双変性を無効 strictPropertyInitialization: プロパティ初期化必須 14 . 3 

28. esModuleInterop 15 . 1 

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

    2 

30. CommonJs import/export CommonJs import/export // export const hoge = ()

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

31. ES6 Module import/export ES6 Module import/export // export export const

    hoge = () => { // ...some func }; // import import { hoge } from 'hoge'; hoge(); 15 . 4 

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 

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

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