TypeScript 是 JavaScript 的語法超集：合法 JS 幾乎都能放進 .ts 檔，同時多了型別系統與編譯期檢查，讓錯誤在寫程式時就被抓出，而不是等到使用者按下按鈕才尖叫。瀏覽器與 Node.js 最終仍執行 JavaScript，所以 .ts 通常要先經 TypeScript 編譯器（tsc） 轉成 JS 再執行——型別資訊留在開發階段，不會原封不動出現在輸出檔裡。

這篇帶你在 macOS 完成 TypeScript 入門全流程：安裝 Node.js、tsc 安裝、tsconfig.json 設定、編譯第一支程式，並比較 Node.js、ts-node、Playground、Deno 與 Bun 幾種常見執行方式。

快速參考

項目說明
TypeScript 是什麼JS 超集 + 靜態型別檢查，輸出仍是 JavaScript
tsc 安裝npm install --save-dev typescript，執行用 npx tsc
tsconfig 初始化npx tsc --init 產生 tsconfig.json
編譯專案npx tsc → 輸出到 dist/；只檢查型別：npx tsc --noEmit
不想裝環境TypeScript Playground 線上試寫
Node.js 安裝Homebrew 教學 的 brew install node，或 官方下載
替代執行環境ts-node（開發腳本）、Deno／Bun（內建 TS 支援）

目錄

TypeScript 是什麼？

一句話：TypeScript = JavaScript + 型別。它不是把 JS 重新發明一遍，而是在你熟悉的語法上加上型別註記、interface、泛型等工具，並由 tsc 在編譯時檢查型別是否一致。

實務上，多數團隊會把 .ts 編譯成目標環境能跑的 JS（例如 ES2022），再交給 Node.js 或打包工具處理。好處是重構時編譯器會提醒你哪裡漏改，IDE 也能提供更準確的自動完成——比靠 console.log 考古快多了。

建立 TypeScript 開發環境

先裝 Node.js，再在專案內安裝 TypeScript。把 tsc 裝在專案裡（而非全域），版本比較好固定，也比較不會遇到「在我電腦明明可以」的經典劇情。

安裝 Node.js

從 Node.js 官方網站 下載，或用 Homebrew：

brew install node

確認可用：

node --version
npm --version

安裝 TypeScript（tsc）

建立專案並初始化：

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

把 TypeScript 裝成開發依賴——這就是 tsc 安裝的標準做法：

npm install --save-dev typescript

pnpm 使用者：

pnpm add --save-dev typescript

專案內的 tsc 不會自動變成全域命令，請透過 npx（或 pnpm exec）執行：

npx tsc --version

初始化 tsconfig.json

tsconfig.json 告訴編譯器要處理哪些檔案、輸出什麼格式的 JS。執行：

npx tsc --init

入門可先採用這份精簡設定：

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

重點三項：

  • target：輸出的 JavaScript 語法版本
  • module / moduleResolution：依 Node.js 現代模組規則解析
  • strict: true：開啟嚴格型別檢查，編譯期能抓出更多問題

實際專案會依 Node 版本與建置工具調整；上面這份適合作為現代 Node.js 的入門起點。

寫出並編譯第一支 TypeScript 程式

建立 src/hello.ts：

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

console.log(message);

編譯：

npx tsc

輸出會依照 tsconfig.json 放到 dist/。執行產生的 JS：

node dist/hello.js

若把字串傳給需要數字的函式，tsc 會在編譯時報錯——這就是型別檢查的價值，比執行時才發現少掉幾根頭髮。

tsc 常用指令

指令用途
npx tsc依 tsconfig.json 編譯整個專案
npx tsc --noEmit只檢查型別、不產生輸出（適合 CI）
npx tsc src/hello.ts編譯單一檔案（可能不完全套用專案設定）

正式專案建議讓 tsconfig.json 管理編譯範圍，執行不帶檔名的 npx tsc，行為最一致。

執行 TypeScript 的幾種方式

完成編譯後，最單純的路線是 Node.js 跑輸出的 JS。也有適合不同情境的工具——重點不是哪個最潮，而是哪個適合你的專案。

使用 Node.js

Node.js 執行的是 JavaScript。入門建議先 tsc 編譯再執行：

npx tsc
node dist/hello.js

使用 ts-node

ts-node 讓你在開發時直接執行 .ts 檔，適合快速測試與腳本；正式部署仍依專案建置流程：

npm install --save-dev ts-node typescript
npx ts-node src/hello.ts

TypeScript Playground

不想裝任何東西？TypeScript Playground 是線上沙盒，可貼程式碼、看型別錯誤與編譯結果。先在 Playground 把概念煮熟，再搬回專案，通常比直接在正式環境亂加鹽安全。

Deno

Deno 內建 TypeScript 支援，不需先跑 tsc：

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

Deno 是獨立執行環境，請依官方文件安裝，不要用 npm install -g 取代。

Bun

Bun 同樣能直接執行 .ts：

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

Bun 也是獨立執行環境，不是用 pnpm add bun -g 取得的 npm 套件。

常見 FAQ

TypeScript 跟 JavaScript 有什麼差別？

TypeScript 在 JavaScript 語法上加入型別系統；合法 JS 通常也是合法 TS。差別在開發階段多了型別檢查，執行時仍是 JavaScript。

需要全域安裝 tsc 嗎？

不需要。在專案內 npm install --save-dev typescript，用 npx tsc 即可。全域安裝容易造成版本不一致，團隊協作時尤其麻煩。

tsconfig.json 的 strict 要開嗎？

入門建議開 strict: true。一開始型別錯誤多一點，但長期能避免更多隱性 bug。若遷移舊 JS 專案，可暫時關閉部分選項，再逐步收緊。

用 Homebrew 可以裝 TypeScript 嗎？

Homebrew 適合裝 Node.js（brew install node），TypeScript 則建議用 npm／pnpm 裝在專案裡。這樣每個專案能鎖定自己的 typescript 版本，CI 與本機行為也一致。

Deno 或 Bun 還需要 tsc 嗎？

Deno 與 Bun 能直接執行 .ts，開發腳本時很方便。但若你要產出給 Node.js 或瀏覽器用的 JS、或需要嚴格控制輸出格式，仍建議用 tsc（或 esbuild、swc 等建置工具）編譯。

接下來可以學什麼？

你已完成 TypeScript 入門的基本流程：

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

下一步可學基本型別、函式型別、interface、泛型，以及在既有 JS 專案中逐步加入 TypeScript。先從能讓程式更好理解的型別開始，不必一口氣把整本手冊吞下去——那樣連編譯器都會替你噎到。

參考資料