iT邦幫忙

2022 iThome 鐵人賽

DAY 4
0
Modern Web

Hello TypeScript 菜鳥系列 第 4

Day 3. TypeScript環境設置:編譯組態設定(tsconfig)

  • 分享至 

  • xImage
  •  

Day 2 標題有特別說到是建置TypeScript的預設環境,代表開發者其實可以自行決定Compiler如何檢查與轉換程式碼,而 tsconfig檔案 就是TypeScript用來提供開發者設定Compiler的檢查與轉換行為。

今天主要目的是知道可設定的常用組態,希望不會像前幾天一樣過於冗長(汗)。


如前言所說,tsconfig檔是讓TypeScript知道如何去檢查與轉換程式碼的檔案,如果根目錄有這份檔案,Compiler就會遵循 tsconfig 內設定好的組態去執行它的任務,而這些組態大致就是用來:

  1. 設定根目錄(root directory);
  2. 設定編譯器將.ts檔案程式碼轉換成JavaScript程式碼的方式;
  3. 設定編譯器檢查.ts檔案程式碼的方式

動手以前要再次提醒的是,tsconfig檔必須被放置在專案根目錄。此外前面也有說到tsconfig檔可以自行設定根目錄,總之確認檔案的確是放在根目錄即可。

tsconfig檔可供設定的組態至少有一百個,但不是所有組態都需要設定,這邊只需先知道常用組態就好。

如果是第一次建立檔案,在這之前可先使用一道指令:

tsc --init

此時專案內會產生一份 tsonfig.json

tsonfig.json 檔案內是 compilerOptions 其中八大子類別的組態預設值和說明,例如:專案本身(Projects)、程式語言與環境相關 (Language and Environment)、模組相關 (Modules)、JavaScript支援方式 (JavaScript Support)、輸出相關的 (Emit)、兼容性限制 (Interop Constraints)、型別檢查 (Type Checking)和完整性檢查(Completeness)。

config init

但tsonfig檔可供設定的組態不只有這些,在TSConfig的官方文件內首先包含與 compilerOptions 同層級的其他根領域(Root Fields)組態像是 filesextendsincludesexcludesreferences,而 compilerOptions 底下也有其他如 Editor SupportOutput FormattingWatch Options 等子類別,由於官方文件有更詳細的說明,這裡就不贅述了。

為了檔案內容的簡潔,這裡不使用 tsc --init 產生的檔案,而是自行建立一份 tsconfig.json,以下範例整理一些重要和常用的組態,並附上一些可參考選用的組態:

{
  "compilerOptions": {
    "target": "ES5", // 編譯後的JavaScript程式碼版本

    /* Modules */
    "module": "CommonJS", // 編譯後產生的模組形式 (註:設定為commonjs通常是為了能讓程式在Node上執行)
    "rootDir": "./src", // 設定編譯根目錄

    /* JavaScript Support */
    "allowJs": true, // 允許js檔案是否被TypeScript Compilet檢查 (官方建議可設"checkJs"為true來取得錯誤報告)
    "checkJs": true, // 會對js檔案進行型別檢查且輸出錯誤報告

    /* Emit */
    "sourceMap": true, // 可建立來源檔案與輸出的js檔案關係map
    "outDir": "./public", // 編譯器編譯後的js檔案放置處 (註:public通常是要部署專案到伺服器用的資料夾)
    "removeComments": true, // 不會輸出註解
    "noEmit": true, // 可避免輸出不符型別檢查的js檔案, 例如Day 1的string型態變數再賦值number值的範例

    /* Interop Constraints */
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true, // 對import進來的模組檔名強制作大小寫轉換, 可避免如 import LearnTS.ts 寫成 import learnTS.ts 的大小寫錯誤

    /* Type Checking */
    "strict": true
    "noImplicitAny": true    // 不允許未指定型別的變數
    "alwaysStrict":true  // 採用JavaScript嚴格模式檢查型別, 並且會在輸出的每一份JS檔案首行加上 "use strict"
  },
  "files": ["type.ts", "type.spec.ts"], // 編譯檔案白名單, 意即指定要編譯的檔案 (不可用glob指定檔案或資料夾)
  "include": ["src"], // 編譯白名單, 意即指定要編譯的檔案和資料夾
  "exclude": ["node_modules", "**/*.spec.ts"] // 編譯黑名單, 意即指定不要編譯的檔案和資料夾
}

以上範例有幾個要點需注意:

  1. 範例中的 files 只適合檔案少的專案且不能用glob模式匹配方式去指定多個資料夾或檔案;
  2. 若想指定多個資料夾和檔案,可以用 include
  3. 檔案在 include 包含的資料夾底下,但匹配到 exclude 內有指定的檔名,如 src 資料夾下有檔名符合 \*\*/*.spec.ts 形式的檔案,則檔名匹配到 \*\*/*.spec.ts 的檔案都不會被編譯;
  4. 包含於 files 中的檔案即使有匹配到 exclude 指定檔名,如範例的 type.spec.ts,還是會被編譯。

由這幾點舉例可知檔案被編譯的優先權是 files > exclude > include


最後,其他未介紹的組態可參考官方文件的介紹說明

然後要留意的是文件介紹中有提到

When input files are specified on the command line, tsconfig.json files are ignored.

意思是如果像 Day 2 一樣用 tsc index 的方式去編譯檔案(index.ts),則編譯器會忽略tsconfig檔案的組態設定去編譯這份檔案。


後記
事實上 tsconfig 檔案可以是 tsconfig.jsonjsconfig.json,這兩者之中的其中一種檔案(檔名)都可對TypeScript Compiler的編譯行為作設定,只不過通常都是用 tsconfig.json


參考資料
What is a tsconfig.json
TypeScript: TSConfig Reference
Understanding the glob pattern in Node.js


上一篇
Day 2. TypeScript環境設置:建置預設開發環境
下一篇
Day 4. TypeScript 基本型別
系列文
Hello TypeScript 菜鳥31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言