Angular 2筆記：tsconfig.json 設定

看了Angular 2的 TypingScript Configuration所做的簡單筆記，第一次接觸TypingScript，還有許多要學。

tsconfig.json：

typeScript compiler configuration. 


下列為Angular 2 中tsconfig.json 必要的設定：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

特別提的是 noImplicitAny：預設為false。

當設定為false時，當compiler無法根據使用方式推斷出一個變數的type時，會自動將變數type轉成any，如此稱為 implicit any。

設定為true時，遇到無法推斷變數type時，compiler同樣會產生Javascript的檔案，同時會回報error。但設成true的情況下仍然是可以將變數型態指定為any。

如果不希望因為any type而顯示那些特定的error，可以在tsconfig.json內加入

"suppressImplicitAnyIndexErrors":true

typings：

TypesScript declaration files.

TypeScript type definition files 檔案以d.ts 結尾，內容用來告訴compiler關於所要載入的library的內容，未完整設定可能會導致compile無法分辨語法而拋出error。

安裝typings：

可以透過npm安裝所需的typings，在package.json內定義一段script，目的是在npm安裝完後自動安裝所需要的typings。這段script會自動安裝定義在typings.json內所列出的library之 d.ts檔到typings資料夾內。

{
  "scripts": {
    "postinstall": "typings install"
  }
}

Quick Start內定義之typings.json

{
  "ambientDependencies": {
    "es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654",
    "jasmine": "registry:dt/jasmine#2.2.0+20160412134438",
    "node": "registry:dt/node#4.0.0+20160509154515"
  }
}

上面列出es6-shim, jasmine與node，如此會在npm安裝完成後，自動安裝上列三個的d.ts檔案到typings的資料夾內。

手動安裝typings：

如果透過script方式自動安裝失敗，可以用以下方式安裝：

npm run typings install

列出已安裝之typings檔案

npm run typings list

Typins file 衝突

因為TypingScript compiler不允許對type重新定義，如果碰到這樣的情況，compiler會拋出錯誤。
這類情況很常見，解決方法是要告訴compiler要忽略哪一個重複的typing檔案，方法是在tsconfig.json內加入exclude，

{
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

參考文章：
5 Min Quickstart
TypeScript Configuration