TypeScript 編譯器的選項

TypeScript 的許多功能是透過 TypeScript 編譯器 (tsc) 來實現的。tsc 有許多選項可以用來調整編譯過程的行為。

設置專案

建立一個目錄

$ mkdir tsc-options
$ cd tsc-options

透過 npm 產生 package.json 檔案

$ npm init -y

在 Local 端安裝 TypeScript

$ npm install --save-dev typescript@4.8.3 #or -D

TypeScript 選項值設定

透過 tsc 建立 TypeScript 的設定檔 (tsconfig.json)

$ npx tsc --init

P.S. 由於 typescript 是安裝在 local，執行時要透過 npx 指令(由 npm 所提供)

TypeScript 選項值影響

先在專案目錄下建立 src 子目錄，並在此目錄下撰寫程式

$ mkdir src
$ touch src/index.ts

程式如下:

function add(a, b) {
    return a + b;
}
add(25, null);

上述的程式可否通過 tsc 型態檢核呢？ 答案很難回答，因為取決於“tsc 選項”的設定。

若直接以預設的情況執行編譯，則會有以下的錯誤訊息。

$ npx tsc
src/index.ts:1:14 - error TS7006: Parameter 'a' implicitly has an 'any' type.

1 function add(a, b) {
               ~

src/index.ts:1:17 - error TS7006: Parameter 'b' implicitly has an 'any' type.

1 function add(a, b) {
                  ~


Found 2 errors in the same file, starting at: src/index.ts:1

等你調整了 tsconfig.json 中的 “noImplicitAny” 選項（= false）設定後，再執行一次編譯處理，竟然就成功了！

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

//tsconfig.json
{
  "compilerOptions": {
    //...
    /* Type Checking */
    "strict": true,                                      /* Enable all strict type-checking options. */
    "noImplicitAny": false,                              /* Enable error reporting for expressions and declarations with an implied 'any' type. */
    // "strictNullChecks": true,                         /* When type checking, take into account 'null' and 'undefined'. */
    //...
  }
}

我們來看看到底是怎麼一回事 首先，先打開 tsconfig.json 選項設定檔中的 “declaration” 選項 （“declaration”: true,）

1
2
3
4
5
6
7
8
9

//tsconfig.json
{
  "compilerOptions": {
  //...
  /* Emit */
      "declaration": true,           
  //...
  }
}

再執行一次編譯處理，隨著已開啟 “declaration”: true 選項值，tsc 編譯器會在 index.ts 原始碼的相同目錄中産生了 index.js & index.d.ts 二個編譯結果檔案。

index.js 是 index.ts 編譯完成的 js 程式結果檔。 index.d.ts 則是編譯過程式預設會産生的 TypeScript 型態定義檔。開啟 index.d.ts，內容如下：

declare function add(a: any, b: any): any;

原來 tsc 把你在 index.ts 所撰寫沒有型態註記的程式碼，自行推論為型態都是使用 any。搭配著前述 “noImplicitAny"選項值是 true 或 false (預設值為 true) 才會産生編譯成功或失敗的結果呀。（“noImplicitAny”選項的用途是：若資料沒有型別註記，禁止 TypeScript 隱性推論其型別為 any 型別）

解決了一個疑問，心中是否又産生另一個疑問呢： 不是編譯失敗(型態有誤）嗎？怎麼還會産生 js 檔案呢？原來輸出程式碼與型態檢查的結果完全無關，所以型能有誤的程式是可以産生輸出的。你可以把 TypeScript 的錯誤視為是警告訊息，雖然可能是一個人值得追查的問題，但不會中斷組建的程序。那可否要求若有錯誤發生時不要産生結果檔案呢？可以的，透過“noEmitOnError”選項來控制，它的預設值是false，若你開啟 tsconfig.json “noEmitOnError”選項，並把它的值設成 true，則當編譯過程有錯誤時就不會還産生 js 檔案了。

tsc 編譯選項

module 參數可指定的值

compilerOption中 lib 屬性選項（設定編譯時要加入的函式庫）

檢查編譯器能存取的檔案

$ npx tsc --listFiles

NPM 版本格式

版本編號 3.8.1

• major version number: 主版本編號 3
• minor version number: 次版本編號 8
• revision version number: 修訂版本編號 1