昨天我們聊了為什麼要學 TypeScript，
今天就來真的動手，把開發環境弄起來 🚀

1. 安裝 TypeScript

要跑 TypeScript，第一步當然是安裝。假設你電腦已經有 Node.js (LTS 版)，那就直接開終端機：

npm init -y
npm install --save-dev typescript
npx tsc --init

補充小知識：全域 vs 專案安裝

• 全域安裝：npm install -g typescript

  → 這樣你可以在任何地方用 tsc 指令，但不利於專案維護。

• 專案安裝（推薦）：用 -save-dev，鎖定版本在 devDependencies，不怕換電腦或跟別人協作出現版本衝突。

2. tsconfig.json 是什麼？

tsconfig.json = TypeScript 的設定中心。

它決定了「要編譯哪些檔案」和「要怎麼編譯」。

如果你第一次打開，可能會嚇到：「哇靠，怎麼一堆選項！」

但其實只要抓住幾個核心，就能順利跑起來。

3. 最小可跑模板

先給你一個「能跑就好」的模板：

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "skipLibCheck": true},
  "include": ["src"],
  "exclude": ["node_modules"]
}

補充：幾個常見參數

• "target": "ES6"

  → 決定輸出的 JS 語法版本（建議至少 ES6，太舊的瀏覽器可以用 Babel 處理）。

• "module": "commonjs"

  → Node.js 預設用 CommonJS，如果是前端可改成 "esnext"。

• "strict": true

  → TS 的精華之一！開啟嚴格模式，避免很多雷。

• "esModuleInterop": true

  → 讓 import fs from "fs" 可以用，不然要寫成 import * as fs from "fs"。

👉 可以把 tsconfig.json 想成「TypeScript 的食譜」，你只要決定輸出格式 + 嚴格程度即可。

4. 建立第一個 TS 專案結構

讓我們來建個小專案：

my-ts-app/
├── src/
│   └── index.ts
├── package.json
└── tsconfig.json

src/index.ts：

const userName: string = "Marco";
console.log(`Hello, ${userName}!`);

編譯 + 執行：

npx tsc   # 編譯成 JS
node dist/index.js

預設編譯會丟到 dist/ 資料夾，裡面就是乾乾淨淨的 JavaScript。

5. tsconfig 再進化（進階設定）

等你熟悉後，可以加一些設定，讓專案更像「真實世界」：

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "node",
    "outDir": "dist",
    "rootDir": "src",
    "strict": true,
    "resolveJsonModule": true,
    "noImplicitAny": true,
    "allowJs": true}
}

為什麼要這些？

• outDir + rootDir：確保 TS 把編譯後的檔案丟到 dist/，不會跟原始碼混在一起。
• moduleResolution: node：模擬 Node.js 找模組的方式（幾乎都需要）。
• resolveJsonModule: true：允許你直接 import data from "./data.json"。
• noImplicitAny: true：避免 TS 偷偷給你 any（這樣就失去型別保護了）。
• allowJs: true：如果你專案裡有舊的 JS 檔案，也能一起編譯。

6. 用 VSCode 讓 TS 更好用

推薦幾個 VSCode 插件：

• Error Lens：錯誤會直接顯示在程式碼旁邊，不用再找問題在哪。
• TypeScript Hero：自動幫你補上 import。
• Auto Import - TS/JS：寫到一半自動補模組。
• Prettier：自動排版，讓程式碼整齊一致。

另外，開啟 VSCode 的自動儲存：

Ctrl/Cmd + Shift + P → 搜 auto save → 設成 afterDelay

7. 常見坑

1. 忘了加 outDir

   → 編譯後的 JS 跟 TS 混在一起，整個專案變超亂。

2. ES Module vs CommonJS 搞混

   → import 和 require 會報錯，這時候要調整 "module" + `"esModuleInterop"。

3. node_modules 太大被編譯

   → 記得在 exclude 裡加 "node_modules"。

4. 版本不一致

   → 團隊協作時，建議在 package.json 裡固定 TS 版本，避免「你電腦跑得動，我的卻爆炸」。