前言

在前一篇文章中，我們學習了 TypeScript 的類型基礎。今天就來整理如何建立和配置 TypeScript 的開發環境，以及相關的開發工具。

概述

要開始 TypeScript 開發，我們需要了解幾個核心工具：

• tsc 編譯器：TypeScript 官方編譯器，將 .ts 文件編譯成 .js 文件
• tsconfig.json：TypeScript 項目的配置文件
• ts-node：直接執行 TypeScript 文件的開發工具
• 現代工具鏈：與其他開發工具的整合

這些工具讓我們能夠高效地開發、編譯和運行 TypeScript 代碼。

tsc 編譯器

TypeScript 官方提供的編譯器叫做 tsc，可以將 TypeScript 腳本編譯成 JavaScript 腳本。本機想要編譯 TypeScript 代碼，必須安裝 tsc。

根據約定，TypeScript 腳本文件使用 .ts 後綴名，JavaScript 腳本文件使用 .js 後綴名。tsc 的作用就是把 .ts 腳本轉變成 .js 腳本。

安裝

# 全域安裝
$ npm install -g typescript

# 或在項目中安裝
$ npm install --save-dev typescript

安裝完成後，檢查一下是否安裝成功：

$ tsc --version
# 或者
$ tsc -v

基本使用

安裝 tsc 之後，就可以編譯 TypeScript 腳本了：

# 編譯單個文件
$ tsc app.ts

# 編譯多個文件
$ tsc file1.ts file2.ts file3.ts

# 編譯當前目錄所有 .ts 文件
$ tsc *.ts

上面命令會在當前目錄下生成對應的 JavaScript 文件。

常用編譯參數

--outFile：合併輸出

如果想將多個 TypeScript 腳本編譯成一個 JavaScript 文件：

$ tsc file1.ts file2.ts --outFile app.js

--outDir：指定輸出目錄

編譯結果默認保存在當前目錄，可以指定其他目錄：

$ tsc app.ts --outDir dist

上面命令會在 dist 子目錄下生成 app.js。

--target：指定 JavaScript 版本

為了保證編譯結果能在各種 JavaScript 引擎運行，tsc 默認會將 TypeScript 代碼編譯成 ES3 版本。通常我們需要指定更新的版本：

$ tsc --target es2015 app.ts
$ tsc --target es2020 app.ts
$ tsc --target esnext app.ts

--watch：監視模式

在開發過程中，可以使用監視模式自動重新編譯：

$ tsc --watch app.ts

文件發生變化時，tsc 會自動重新編譯。

--strict：嚴格模式

啟用所有嚴格類型檢查選項：

$ tsc --strict app.ts

幫助信息

查看可用的編譯選項：

# 基本幫助信息
$ tsc --help

# 完整幫助信息
$ tsc --all

編譯錯誤處理

編譯過程中，如果沒有報錯，tsc 命令不會有任何顯示。如果編譯報錯，tsc 命令就會顯示報錯信息，但依然會生成 JavaScript 文件。

// example.ts
let message: string = 123; // 類型錯誤
console.log(message);

編譯時會看到錯誤信息：

$ tsc example.ts
example.ts(1,5): error TS2322: Type 'number' is not assignable to type 'string'.

TypeScript 團隊認為，編譯器的作用只是給出編譯錯誤，至於怎麼處理這些錯誤，由開發者自己判斷。即使有錯誤，編譯產物依然會生成。

如果希望一旦報錯就停止編譯，不生成編譯產物，可以使用 --noEmitOnError 參數：

$ tsc --noEmitOnError example.ts

tsconfig.json 配置文件

TypeScript 允許將 tsc 的編譯參數寫在配置文件 tsconfig.json 中。只要當前目錄有這個文件，tsc 就會自動讀取，運行時可以不寫參數。

基本結構

{
  "compilerOptions": {
    "target": "es2020",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules",
    "dist"
  ]
}

有了配置文件，編譯時直接調用 tsc 命令即可：

$ tsc

重要配置選項

compilerOptions（編譯選項）

{
  "compilerOptions": {
    // 目標 JavaScript 版本
    "target": "es2020",
    
    // 模組系統
    "module": "commonjs",        // Node.js 環境
    // "module": "esnext",       // 現代瀏覽器環境
    
    // 輸出目錄
    "outDir": "./dist",
    
    // 原始碼目錄
    "rootDir": "./src",
    
    // 嚴格模式（推薦開啟）
    "strict": true,
    
    // 允許匯入 CommonJS 模組
    "esModuleInterop": true,
    
    // 跳過 .d.ts 文件的類型檢查
    "skipLibCheck": true,
    
    // 強制檔案名稱一致性
    "forceConsistentCasingInFileNames": true,
    
    // 生成 source map
    "sourceMap": true,
    
    // 不生成輸出文件（僅檢查類型）
    "noEmit": false
  }
}

include 和 exclude

{
  "include": [
    "src/**/*",           // 包含 src 目錄下所有文件
    "tests/**/*"          // 包含 tests 目錄下所有文件
  ],
  "exclude": [
    "node_modules",       // 排除 node_modules
    "dist",              // 排除輸出目錄
    "**/*.test.ts"       // 排除測試文件
  ]
}

項目引用

對於大型項目，可以使用項目引用來組織代碼：

{
  "files": [],
  "references": [
    { "path": "./packages/core" },
    { "path": "./packages/utils" }
  ]
}

常見配置範例

Node.js 項目配置

{
  "compilerOptions": {
    "target": "es2020",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

前端項目配置

{
  "compilerOptions": {
    "target": "es2020",
    "module": "esnext",
    "moduleResolution": "node",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "jsx": "react-jsx",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

ts-node 開發工具

ts-node 是一個 TypeScript 執行環境，它允許你直接運行 TypeScript 代碼，而不需要先編譯成 JavaScript。

傳統流程 vs ts-node

# 傳統方式
tsc script.ts    # 先編譯
node script.js   # 再執行

# 使用 ts-node
ts-node script.ts  # 直接執行

安裝

# 全域安裝
npm install -g ts-node

# 項目中安裝（推薦）
npm install --save-dev ts-node

# 使用 npx（不需要安裝）
npx ts-node script.ts

主要功能

1. 直接執行 TypeScript 文件

# 執行 TypeScript 文件
ts-node app.ts

# 帶參數執行
ts-node script.ts --arg1 value1

2. 提供 TypeScript REPL 環境

$ ts-node
> let name: string = "TypeScript"
> console.log(name)
TypeScript
> let age: number = 5
> console.log(`${name} is ${age} years old`)
TypeScript is 5 years old
>

3. 支援即時編譯

ts-node 會在記憶體中即時編譯 TypeScript 代碼，不會產生 .js 文件，適合開發和測試階段使用。

使用場景

• 開發階段測試：快速測試 TypeScript 代碼片段
• 腳本執行：直接運行 TypeScript 工具腳本
• 學習練習：方便學習和實驗 TypeScript 語法
• 開發服務器：在開發環境中直接運行 TypeScript 應用

配置選項

可以在 tsconfig.json 中配置 ts-node：

{
  "ts-node": {
    "esm": true,              // 支援 ES 模組
    "experimentalSpecifierResolution": "node"
  },
  "compilerOptions": {
    // ... 其他編譯選項
  }
}

• ts-node 主要用於開發環境，生產環境建議還是先編譯再部署
• 執行速度比預先編譯的 JavaScript 稍慢，因為需要即時編譯
• 支援大部分 TypeScript 功能，包括類型檢查