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   