歡迎來到 TypeScript 的世界。它不是把 JavaScript 重新煮一遍，而是在你寫程式時加上型別檢查，讓錯誤更早被發現。這篇文章會帶你在 macOS 建立基本環境、用 tsc 編譯第一支程式，也會簡單比較幾種常見的執行方式。準備好咖啡——型別錯誤通常比咖啡更早提醒你醒來。

目錄

TypeScript 是什麼？

TypeScript 是 JavaScript 的語法超集。換句話說，合法的 JavaScript 通常也能放進 TypeScript 專案；而 TypeScript 額外提供型別系統與編譯期檢查。

瀏覽器和多數 JavaScript 執行環境最終仍然需要 JavaScript。因此，TypeScript 原始碼通常會先經過 TypeScript 編譯器（tsc）或其他工具處理，再交給 JavaScript 執行環境。型別主要服務於開發階段，不會原封不動地留在輸出的 JavaScript 裡。

建立 TypeScript 開發環境

先準備 Node.js，再在專案裡安裝 TypeScript。把依賴裝在專案中，比全域安裝更容易固定版本，也比較不會出現「在我電腦明明可以」的經典劇情。

安裝 Node.js

你可以從 Node.js 官方網站 下載適合 macOS 的版本，也可以使用 Homebrew：

brew install node

確認 Node.js 與 npm 已經可以使用：

node --version
npm --version

建立專案並安裝 TypeScript

先建立一個專案目錄，接著初始化 package.json：

mkdir typescript-demo
cd typescript-demo
npm init -y

把 TypeScript 安裝成開發依賴：

npm install --save-dev typescript

如果你習慣使用 pnpm，也可以把最後一步改成：

pnpm add --save-dev typescript

安裝在專案裡的 tsc 不會直接成為全域命令。執行它時，可以透過 npx（或 pnpm 的 pnpm exec）使用目前專案的版本：

npx tsc --version

初始化 tsconfig.json

tsconfig.json 是 TypeScript 專案的設定檔，會告訴編譯器要處理哪些檔案，以及要輸出什麼形式的 JavaScript。執行以下命令建立初始設定：

npx tsc --init

你可以先使用一份精簡設定：

{
	"compilerOptions": {
		"target": "ES2022",
		"module": "NodeNext",
		"moduleResolution": "NodeNext",
		"strict": true,
		"outDir": "dist"
	},
	"include": ["src/**/*.ts"]
}

這裡的重點有三個：

  • target 指定輸出的 JavaScript 目標語法。
  • module 與 moduleResolution 讓 TypeScript 依照 Node.js 的現代模組規則解析程式。
  • strict: true 開啟一組較嚴格的型別檢查選項，能在編譯階段抓出更多問題。

實際專案的設定會依 Node.js 版本、模組格式與建置工具而不同；上面這份設定適合作為使用現代 Node.js 的入門起點，不是所有專案的萬用答案。

寫出並編譯第一支 TypeScript 程式

建立 src/hello.ts：

const message: string = 'Hello, TypeScript!';

console.log(message);

接著執行編譯：

npx tsc

編譯器會依照 tsconfig.json 的設定，把輸出放到 dist 目錄。你可以執行產生的 JavaScript：

node dist/hello.js

tsc 不只是把副檔名換掉。它會根據設定檢查型別，並把 TypeScript 語法轉換成目標環境能理解的 JavaScript。假設你把字串傳給需要數字的函式，編譯時就可能收到錯誤，而不是等到使用者按下按鈕後才一起尖叫。

tsc 常用功能

編譯並檢查

直接執行 npx tsc 會依照專案的 tsconfig.json 編譯。若只想檢查型別、不產生輸出，可以使用：

npx tsc --noEmit

這很適合放在提交程式碼前或持續整合流程中。

指定單一檔案

你也可以直接指定檔案：

npx tsc src/hello.ts

不過要注意，命令列直接指定輸入檔案時，可能不會按照你預期使用專案完整的檔案清單與設定。正式專案通常讓 tsconfig.json 管理編譯範圍，再執行不帶檔名的 npx tsc，行為會比較一致。

執行 TypeScript 的幾種方式

完成編譯後，最單純的方法是用 Node.js 執行輸出的 JavaScript。除此之外，也有適合不同情境的工具。它們各有個性，像咖啡豆一樣；重點不是哪一種最潮，而是哪一種適合你的專案。

使用 Node.js

Node.js 執行的是 JavaScript。為了讓行為跨版本、跨設定更容易理解，入門時建議先用 tsc 編譯，再執行輸出的檔案：

npx tsc
node dist/hello.js

使用 ts-node

ts-node 是一個常見的 TypeScript 執行工具，能在開發時協助你直接執行 .ts 檔案。它適合快速測試與腳本，但正式部署仍要依專案的建置方式決定。

在專案中安裝 ts-node 與 TypeScript：

npm install --save-dev ts-node typescript

使用專案內的執行檔：

npx ts-node src/hello.ts

TypeScript Playground

如果你暫時不想安裝任何東西，TypeScript Playground 是很方便的線上沙盒。你可以貼上程式碼，查看型別錯誤與編譯後的 JavaScript，適合用來驗證小範例。

它不是完整的本機專案環境，但用來試驗語法很夠用。先在 Playground 把概念煮熟，再搬回專案，通常比直接在正式環境亂加鹽安全。

Deno

Deno 是另一個 JavaScript 與 TypeScript 執行環境，提供自己的工具鏈。請依照 Deno 官方安裝文件 安裝，不要把 deno 當成一般 npm 套件用 pnpm add -g 安裝。

建立 hello.ts：

// hello.ts
console.log('Hello from Deno!');

接著執行：

deno run hello.ts

Bun

Bun 是另一個 JavaScript 執行環境，也提供執行 TypeScript、套件管理與建置等工具。請依照 Bun 官方安裝文件 安裝；它是獨立的執行環境，不是用 pnpm add bun -g 取得的 npm 套件。

建立 hello.ts：

// hello.ts
console.log('Hello from Bun!');

使用 Bun 執行：

bun run hello.ts

接下來可以學什麼？

現在你已經走過基本流程：

  1. 安裝 Node.js 與專案內的 TypeScript。
  2. 用 tsconfig.json 設定編譯行為。
  3. 用 tsc 檢查並輸出 JavaScript。
  4. 視情境選擇 Node.js、ts-node、Deno 或 Bun。

下一步可以學習基本型別、函式型別、物件型別、泛型，以及如何在實際 JavaScript 專案中逐步加入 TypeScript。先從能讓程式更容易理解的型別開始，不必一口氣把整本手冊吞下去——那樣連編譯器都會替你噎到。

參考資料