TypeScript 開發實戰入門：從 tsc 到 rimraf，你不能不懂的基礎工具與編譯流程

| TypeScript | 4 Reads

Copyright Notice: This article is an original work licensed under the CC 4.0 BY-NC-ND license. If you wish to repost this article, please include the original source link and this copyright notice.
Source link: https://v2know.com/article/1177

在使用 TypeScript 開發專案的過程中，你可能遇過這些問題：

  • 為什麼需要執行 npx tsc --init？

  • tsc 和 npx tsc 有什麼差別？

  • 為什麼要用 rimraf 清空 dist 資料夾？

  • TypeScript 為什麼不像 Visual Studio 那樣自動處理垃圾輸出檔？

  • --save-dev 是什麼意思？到底什麼是「開發用」與「發佈用」套件？

這篇文章會用一問一答的方式，逐步建立起你對 TypeScript 工具鏈的全面理解。

1️⃣ npx tsc --init 是什麼？

這條指令的作用是建立一份 tsconfig.json 設定檔，讓 TypeScript 知道專案的編譯規則與輸出位置。

npx tsc --init

執行後會產生：

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true
  },
  "include": ["src/**/*"]
}

2️⃣ target 與 module 是什麼意思？

  • "target": "es2016"：指定要編譯成哪一版 JavaScript（如 ES5、ES6、ES2020）

  • "module": "commonjs"：指定模組系統（如 Node.js 用的 CommonJS，或瀏覽器用的 ESModule）

這些會影響編譯結果的語法形式。

3️⃣ outDir 與 rootDir 有什麼用？

  • "rootDir" 指定原始碼來源資料夾（通常是 src）

  • "outDir" 指定編譯後輸出資料夾（通常是 dist）

這樣就能實現把 TypeScript 編譯到獨立的 JavaScript 資料夾中。

4️⃣ tsc 和 npx tsc 有什麼差別？

  • tsc：執行全域安裝的 TypeScript 編譯器

  • npx tsc：執行專案本地安裝的 TypeScript 編譯器（node_modules/.bin/tsc）

為了團隊一致性，推薦使用 npx tsc 或透過 npm scripts 執行。

5️⃣ 使用 npm scripts 精簡指令

在 package.json 中加入：

"scripts": {
  "build": "rimraf dist && tsc",
  "start": "node dist/index.js"
}

之後只需：

npm run build    # 清除 dist 並重新編譯
npm run start    # 執行程式

 

🔍 💡 補充說明：「tsc」為什麼等同於「npx tsc」？

在 package.json 中的 scripts，如：

"scripts": {
  "build": "tsc",
  "start": "node dist/index.js"
}

雖然看起來寫的是 tsc，但實際上它執行的過程如下：

✅ npm 在執行 script 時，會優先尋找本地的 node_modules/.bin/ 目錄下是否有對應指令。

因此：

  • 如果你執行的是 npm run build，它會執行 node_modules/.bin/tsc

  • 跟你手動打的 npx tsc 一樣效果，因為 npx 也是會優先找本地 .bin 執行檔

📌 換句話說：

  • npm run build 中的 tsc == npx tsc

  • rimraf 也是一樣：只要你是用 --save-dev 安裝的，它就會存在 .bin 目錄中，自動可被執行

📛 npx 名字的由來：

npx = Node Package eXecute

就是用來執行「專案本地安裝的指令」，而不用你手動指定 .bin 路徑。

6️⃣ rimraf 是什麼？為什麼需要？

TypeScript 編譯器 (tsc) 並不會自動刪除已經不存在的 .ts 所產生的 .js 檔案。

舉例：

  • 你刪除了 b.ts，但 tsc 不會幫你刪掉 dist/b.js

  • 久而久之，dist 資料夾會累積「垃圾檔」

🔧 rimraf 是一個類似 Unix rm -rf 的 Node.js 工具，可以強制遞迴刪除資料夾

npm install --save-dev rimraf

搭配 build script 使用可確保每次編譯都是乾淨的。

7️⃣ 那為什麼 TypeScript 不像 Visual Studio 那樣智能管理輸出檔？

Visual Studio 的 .NET 編譯器有內建增量編譯與清理機制，每次都會：

  • 檢查哪些檔案有異動

  • 只編譯有變更的檔案

  • 自動刪除不再需要的輸出檔

但是 TypeScript 的 tsc 僅僅是一個單純的編譯器，不管理輸出內容。這是設計哲學的差異。

若要實現自動清理或增量編譯，可以考慮：

  • rimraf + tsc（最簡單）

  • tsc --build + project references（大型專案）

  • 使用 Vite / Webpack（前端專案）

8️⃣ --save-dev 是什麼意思？

在安裝 npm 套件時：

npm install rimraf --save-dev

這表示：

  • 套件是開發階段用的

  • 不會出現在 dependencies，而會記錄到 devDependencies

  • 發佈專案或部署時不會安裝（節省體積）

9️⃣ dependencies 與 devDependencies 差在哪？

類型 說明 典型例子
dependencies 程式執行時會用到的 express, react
devDependencies 只在開發／編譯階段用 typescript, rimraf, eslint

部署伺服器、打包前端時，只會安裝 dependencies。

🔚 結語

TypeScript 雖然不像 Visual Studio 那樣「一鍵編譯＋管理產物」，但透過：

  • tsc

  • npx

  • rimraf

  • npm scripts

  • tsconfig.json

這些工具的搭配，我們可以打造出一個乾淨、可控、適合團隊的開發流程。

📦 推薦 package.json 範例

{
  "scripts": {
    "build": "rimraf dist && tsc",
    "start": "node dist/index.js",
    "dev": "tsc --watch"
  },
  "devDependencies": {
    "typescript": "^5.4.0",
    "rimraf": "^5.0.1"
  }
}

→返回目錄

This article was last edited at