TypeScript 安裝與環境設定

在開始撰寫 TypeScript 程式碼之前，我們需要先安裝 TypeScript 編譯器 (tsc)。TypeScript 編譯器會將 .ts 檔案編譯成 .js 檔案，這樣瀏覽器或 Node.js 才能執行。

安裝 Node.js

TypeScript 編譯器需要在 Node.js 環境中執行，所以首先需要安裝 Node.js。

前往 Node.js 官網
下載 LTS (Long Term Support) 版本
依照安裝程式的指示完成安裝

安裝完成後，開啟終端機 (Terminal) 或命令提示字元 (Command Prompt)，輸入以下指令確認安裝成功：

node -v
# 顯示 Node.js 版本，例如：v20.10.0

npm -v
# 顯示 npm 版本，例如：10.2.3

安裝 TypeScript

使用 npm (Node Package Manager) 來安裝 TypeScript：

全域安裝

全域安裝可以讓你在任何目錄下使用 tsc 指令：

npm install -g typescript

安裝完成後，確認 TypeScript 版本：

tsc -v
# 顯示版本，例如：Version 5.3.2

專案內安裝 (推薦)

在實際開發中，建議將 TypeScript 安裝在專案目錄內，這樣可以確保團隊成員使用相同的版本：

# 初始化 npm 專案 (如果還沒有 package.json)
npm init -y

# 安裝 TypeScript 為開發依賴
npm install --save-dev typescript

專案內安裝後，可以透過 npx 執行 tsc：

npx tsc -v

初始化 TypeScript 設定檔

TypeScript 使用 tsconfig.json 檔案來設定編譯選項。執行以下指令來產生預設設定檔：

# 全域安裝的情況
tsc --init

# 專案內安裝的情況
npx tsc --init

這會產生一個 tsconfig.json 檔案，內容大致如下：

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

常用的編譯選項

選項	說明
`target`	編譯後的 JavaScript 版本 (es5, es6, es2016, es2020 等)
`module`	模組系統 (commonjs, es2015, esnext 等)
`strict`	啟用所有嚴格的型別檢查選項
`outDir`	編譯後的 .js 檔案輸出目錄
`rootDir`	TypeScript 原始碼的根目錄
`sourceMap`	產生 source map 檔案，方便除錯

一個常見的設定範例：

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

編輯器設定

Visual Studio Code (推薦)

VS Code 對 TypeScript 有最佳的支援，因為它們都是由 Microsoft 開發。

安裝 VS Code
VS Code 內建 TypeScript 語言支援，不需額外安裝擴充套件
推薦安裝的擴充套件：
- Error Lens：在程式碼中直接顯示錯誤訊息
- Pretty TypeScript Errors：讓錯誤訊息更容易閱讀

其他編輯器

WebStorm：JetBrains 的 IDE，內建完整的 TypeScript 支援
Sublime Text：安裝 TypeScript 套件
Vim/Neovim：使用 coc.nvim 搭配 coc-tsserver

驗證安裝

建立一個簡單的 TypeScript 檔案來驗證安裝是否成功：

建立 hello.ts 檔案：

function greet(name: string): string {
  return `Hello, ${name}!`;
}

console.log(greet('TypeScript'));

編譯 TypeScript：

tsc hello.ts

這會產生 hello.js 檔案，執行它：

node hello.js
# 輸出：Hello, TypeScript!

恭喜！你已經成功設定好 TypeScript 開發環境了。接下來讓我們學習 TypeScript 如何使用。