フリーランス 技術調査ブログ

フリーランス/エンジニア Ruby Python Nodejs Vuejs React Dockerなどの調査技術調査の備忘録

TypeScriptコンパイルのコマンドおよびtsconfig.json設定ファイル①

TypeScriptコンパイル

watchモード

  • ファイル修正時に動的にコンパイルしてくれるコマンド
tsc index.ts --watch  or tsc index.ts --watch 
  • 複数のファイルを指定する場合
tsc index.ts test.ts --watch

tsc--initコマンド

-- tsconfig.jsonファイルを作成する -- initコマンド実行することにより、ファイルを指定しなくてもコンパイルできるようになる 

tsc --watch

tsconfig.jsonの設定

コンパイル対象のファイルと対象外のファイルを指定する

  • コンパイル対象の指定をする際はincludeとfilesにコンパイルしたいファイルを指定する。
  • excludeはコンパイルしたくないファイルを指定する。任意で指定しない場合defaultで「node_modules」が指定されているが、任意で指定を追加すると意図的に追加しないと「node_modules」のtsファイルもコンパイルされてしまう。
  • **はルートディレクトリ配下にある全てのファイルを指定する。
  • includeとexclude両方に同じファイルを指定した場合、excludeの方が強い
  "include": [
    "*/index.js"
  ],
  "exclude": [
    "test.ts",
    "**/test.ts",
    "node_modules"
  ],"files":[
    "components/test.ts"
  ]

targetの指定

  • デフォルトはes5だが、指定しないとe3としてコンパイルされる。
"target": "es5",  

lib

  • 基本このlibはコメントアウトのまま、targetに指定した定義ファイルが自動的に適用される
  • node_moduls/typescript/lib/lib.es5.d.ts配下にあるファイルを指定する。
    "lib": ["es5"], 
  • es6の場合はデフォルトで指定されている
    "lib": ["es6","DOM","DOMIterable","ScriptHost"], 

その他のオプション

    // "allowJs": true,                       /* Allow javascript files to be compiled. */
    // "checkJs": true,                       /* Report errors in .js files. */
  • reactでも利用する
    // "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
  • *.d.ts(型定義ファイル)
    // "declaration": true,                   /* Generates corresponding '.d.ts' file. */