TypeScript 安裝與環境設定：完整安裝指南

在開發 JavaScript 的專案時，不論是前端的 React 或 Vue，或者後端的 Node.js 或 Deno，TypeScript 已經成為許多開發團隊的首選。不過，如果你剛開始接觸 TypeScript，可能不太清楚要怎麼安裝和設定 TypeScript。可能不曉得全域安裝和專案層級安裝差在哪，或是 tsconfig.json 又該怎麼寫才對。

如果你有這些問題也不用擔心，這篇文章會一步步帶你上手 TypeScript，讓你快速開始寫型別安全的程式碼。事實上，要開始 TypeScript 沒有想像中的男，只要大約五分鐘，快速安裝與設定後，就能開始用 TypeScript 寫程式。

前置準備：Node.js 和 npm

在安裝 TypeScript 之前，你需要先安裝 Node.js 和 npm（套件管理工具）。如果你是 JavaScript 的開發者，應該已經安裝過了。

可以先在終端機執行以下指令來檢查是否已經安裝：

node --version
npm --version

如果看到版本號碼 (像是 24.4.1 或 22.17.1)，就代表已經安裝好了。如果還沒有裝的話，可以到 nodejs.org 下載 LTS (長期支援) 版本，這會同時安裝 Node.js 和 npm。

TypeScript 需要搭配 Node.js 14.17 或以上版本使用，但實務上我們通常會直接裝最新的 LTS 版本。

全域安裝 TypeScript

安裝 TypeScript 有兩種方式：全域安裝到你的電腦上，或是針對個別專案進行安裝。我們先從全域安裝開始，因為這種方式對新手來說比較簡單。

全域安裝表示 TypeScript 後，在電腦上的任何地方都可以用：

npm install -g typescript

安裝完成後，可以驗證是否安裝成功：

tsc --version

應該會看到類似 Version 5.1.6 的資訊（實際版本號會依你安裝的時間而定）。

如果有正確顯示版本資訊，這樣代表你的終端機中已經能隨時用 TypeScript 編譯器（tsc），將任何 .ts 檔案編譯成 JavaScript：

tsc filename.ts

全域安裝簡單好用，適合學習或小規模測試。但如果你的專案需要多人協作，或是不同專案得用不同版本的 TypeScript，建議改用專案層級安裝。

在專案中安裝 TypeScript

專案層級安裝是把 TypeScript 裝在特定專案裡，這樣有幾個好處：

不同專案可以用不同版本的 TypeScript，不會互相干擾。
團隊成員從原端拉下專案時，會自動用相同的 TypeScript 版本。
避免全域套件的版本衝突問題。

要在專案中安裝 TypeScript，要先建立新資料夾並初始化 npm 專案 (-y 會直接用預設設定生成 package.json，這個之後可以隨時調整)：

mkdir my-typescript-project
cd my-typescript-project
npm init -y

接著將 TypeScript 安裝為開發依賴 (-D 參數是--save-dev 的縮寫，意思是 TypeScript 只會在開發時用，正式環境不會用到)：

npm install -D typescript

如果你的專案會用到 Node.js 的 API，建議再裝 Node.js 的型別定義：

npm install -D @types/node

安裝完後檢查一下本機的 TypeScript 是否正常 (npx 會執行專案裡的 TypeScript，而不是全域版本，確保版本一致)：

npx tsc --version

建立你的第一個 TypeScript 專案

接下來，我們會建立一個標準的 TypeScript 專案結構。首先我們要先創建 TypeScript 設定檔 (下面這個指令會產生一個 tsconfig.json 檔案，裡面有合理的預設設定和許多實用註解。這個檔案會告訴 TypeScript 該如何編譯你的程式碼)：

npx tsc --init

接著，建立基本的資料夾結構 (src 資料夾用來放 TypeScript 原始檔案，dist 資料夾用來放編譯後的 JavaScript 檔案)：

mkdir src
mkdir dist

完成後，可以在 src/index.ts 寫下你的第一段 TypeScript 程式碼：

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

const message = greet("TypeScript");
console.log(message); // Hello, TypeScript!

善用 TypeScript 編譯器（tsc）

TypeScript 編譯器（tsc）是在開發 TypeScript 時很常會用到的工具，它會協助將 TypeScript 程式碼轉換成 JavaScript。以下是幾個最常用的指令：

編譯單一檔案： 這會在 src 資料夾生成 index.js，檔案裡面會是編譯好的 JavaScript 程式碼。

npx tsc src/index.ts

編譯整個專案： 這會根據 tsconfig.json 的設定編譯專案中所有 TypeScript 檔案。

npx tsc

監看模式： 透過 --watch 開啟監看模式後，每次存檔，TypeScript 會自動重新編譯，所以如果有錯誤，會馬上看到，很適合開發時搭配。

npx tsc --watch

只檢查錯誤，不產生檔案： 這會執行型別檢查，但不會產生 JavaScript 檔案，所以速度比較快，適合用來快速檢查程式碼是否有型別錯誤。

npx tsc --noEmit

你也可以將這些指令加到 package.json 的 scripts 區段。這樣就能執行 npm run build、npm run dev 或 npm run type-check 指令來跑上面提到的不同編譯模式：

{
  "scripts": {
    "build": "tsc",
    "dev": "tsc --watch",
    "type-check": "tsc --noEmit"
  }
}

開發環境設定

要讓 TypeScript 用起來順手，自於編輯器或 IDE 的支援不可少。多數現代編輯器都對 TypeScript 有很好的整合，尤其是 Visual Studio Code，內建 TypeScript 支援，開箱即用，不需要額外安裝擴充功能。開啟 .ts 檔案時，你立即就能得到：

型別錯誤的紅色波浪線提醒。
超精準的自動完成建議。
快速跳轉到變數或函式的定義。
支援智慧型重構功能。

順帶一提，在 VS Code 中，把滑鼠停在變數上（例如 index.ts 裡的 message），就能看到 TypeScript 推論的型別（像 string），這在開發時特別有幫助。

雖然上面提到的設定過程可能看起來有點複雜，但這些基本上只需要設定一次，接下來就不需用動到。在下一篇文章開始，我們會深入 TypeScript 的型別系統，從最基本的 string、number 等基礎型別開始，帶大家寫出更安全可靠的程式碼。

加入 E+ 成長計畫

如果你覺得這篇內容有幫助，喜歡我們的內容，歡迎加入 ExplainThis 籌辦的 E+ 成長計畫，透過每週的深度主題文，以及技術討論社群，讓讀者在前端、後端、軟體工程的領域上持續成長。