第2回はTypescriptのコンパイラについて学んでいきます。

コンパイルするときのコマンド

ウォッチングモードにしておくと、いちいちコマンドを叩かなかくても、自動でコンパイルしてくれます。

tsc -w

また、コンパイルしたいプロジェクトをファイルごとではなく全体で指定したい場合は、下記コマンドを該当プロジェクトで実行する。

tsc --init

コンパイラの設定ファイル

Typescriptのコンパイルの設定は、ts.config に記載されています。

ここではts.config にどんな設定があるかを確認していきます。

exclude

コンパイルしたくないファイルやディレクトリを指定します。

excludeを設定する場合は、不要なコンパイルを避けるため、node_modulues を必ず入れます。

excludeを設定しない場合(空配列ではなく、exclude というキーをそもそも書かない場合)は、デフォルトでnode_modules がコンパイルから外れるため、わざわざ設定しなくても大丈夫です。

  "exclude": [
    "node_modules", 
    "Type"
  ],

include

excludeの反対で、コンパイルしたいファイルやディレクトリを指定します。

"*.dev.ts" のようにワイルドカードを指定できたり、ディレクトリを指定した場合は再帰的に全てのファイルをコンパイルしてくれたりします。

また、includeとexcludeの両方を設定した場合は、includeが先に読み込まれ、excludeが後から読み込まれます。

そのため、includeでディレクトリを指定し、そのディレクトリからコンパイルしたくないものをexcludeで指定する、という運用が一般的です。

  "include": [
    "app.ts",
    "analytic.ts"
  ],

files

コンパイルするファイルを指定することができます。

ワイルドカードは使用できません。

excludeで指定されたものも、問答無用で対象になるため、exclude、include、filesでは、filesが最も強いです。

  "files": [
    "app.ts"
  ]

compilerOptions

コンパイルのオプションが設定されています。

かなりの数の設定があるため、主要なものだけ確認していきます。

target

コンパイルした後のJavascriptのバージョンを指定します。

"compilerOptions": {
    /* Language and Environment */
    "target": "ES2016",
}

lib

参照するライブラリを指定する項目です。

独自のライブラリやTypeScript の標準ライブラリ以外のライブラリを参照したい場合に使用します。

設定する場合は、Typescriptの標準ライブラリ（ES2016など）も併せて指定しないと、エラーになります。

    "lib": [
      "DOM",
      "ES2016",
      "DOM.Iterable",
      "ScriptHost"
    ], 

allowJs

TypeScriptコンパイラにJavaScriptファイルをコンパイル対象として含めるかどうかを指定します。

"allowJs": true, 

checkJs

JavaScriptファイル内の型チェックを有効にするかどうかを制御します。

"checkJs": true,

sourceMap

TypeScriptコンパイラにソースマップファイルを生成させるかどうかを制御します。

trueにするとTypescriptとJavascriptの対応表（ソースマップ）が作成され、ブラウザのデバッグ時にJavascriptではなくTypescriptでデバッグができるようになります。

"sourceMap": true,

outDir

コンパイルをした後のファイルの出力場所を指定します。

distディレクトリを用意しておき、そこに全てのコンパイル後のファイルを出力するなどができます。

"outDir": "./dist", 

rootDir

コンパイラがどのディレクトリ以下を対象にコンパイルするかを制御します。

srcディレクトリを用意しておき、その配下のファイルをすべてコンパイルしたい場合などに役立ちます。

"rootDir": "./src",

removeComments

コンパイル後のファイルにコメントを含めるか含めないかを制御します。

trueにすると、コメントを除いたソースがコンパイルされます。

"removeComments": true,

noEmit

Javascriptファイルを実際には出力しないという制御をします。

Typescriptの型チェックだけを行いたい場合に使用します。

"noEmit": true,

downlevelIteration

古いバージョンのJavaScriptエンジンに対するイテレーション（反復）の動作を制御します。

具体的には、for...of ループを含むコードをコンパイルする際の動作を指定します。

true に設定すると、TypeScriptコンパイラは for...of ループを、古いバージョンのJavaScriptエンジンでも正しく動作するようにトランスパイルします。

エンジンがES6のイテレータープロトコルをサポートしていない場合に使用される設定です。

"downlevelIteration": true,

noEmitOnError

Typescriptファイルになんらかのエラーがあった場合、Javascriptファイルを生成するかどうかを制御します。

noEmitOnError の項目がそもそもない場合は、デフォルトでfalseになっており、これはTypescirptファイルにエラーがあっても、Javascriptファイルを生成することを意味します。

trueの場合、いずれかのTypescriptファイルにエラーがあった場合、全てのファイルに対して、Javascriptファイルを生成しません。

"noEmitOnError": true,

strict

厳格な型チェックを行うかどうかを制御します。

noImplicitAny ~ alwaysStrict の設定で、型チェックの細かい個別の設定をすることができます。

strictがtrueの場合、厳格な型チェックを行い、細かい個別の設定が全てtrueの場合と同義です。

"strict": true,

対象:

    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictBindCallApply": true,
    "strictPropertyInitialization": true,
    "noImplicitThis": true,
    "useUnknownInCatchVariables": true,
    "alwaysStrict": true,

noImplicitAny

any型を許容するかどうかの設定をします。

関数のパラメータに型が指定されていない場合、通常はany型が型推論されエラーになりますが、noImplicitAnyがfalseの場合は、エラーになりません。

ちなみに変数の場合は、最初に型が定義されていなくても代入される値で、型推論できるためany型が型推論されることはありません。

"noImplicitAny": true,

strictNullChecks

null, undefined が入る可能性のある値の制御をします。

デフォルトはtrueで、trueの場合、null, undefined が入る可能性があるとエラーを出します。

falseにすると、null, undefined が入る可能性があっても、エラーを出しません。

"strictNullChecks": true

strictBindCallApply

bind, call, apply メソッドを使用する場合、引数の数や型が関数と一致しない場合、型エラーが発生します。

falseにするとエラーが発生しません。

"strictBindCallApply": true,

noUnusedLocals

trueにすると使っていないローカル変数に対して、エラーを出します。

"noUnusedLocals": true,

noUnusedParameters

trueにすると、関数の引数のうち、呼び出した時に使われていない引数があるとエラーを出します。

“noUnusedParameters”: true,

noImplicitReturns

trueの場合、return文がある関数があった場合、if文などの条件分岐でreturnが返ってこないパターンがあると、エラーを出します。

trueの場合でも、関数の中に1つもreturnがない場合は、エラーになりません。

"noImplicitReturns": true,