tsconfig.jsonを完全に理解する

C655ad8165b97ea420bd8a33c62e7895?s=47 pco2699
October 08, 2019

 tsconfig.jsonを完全に理解する

C655ad8165b97ea420bd8a33c62e7895?s=128

pco2699

October 08, 2019
Tweet

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