跳到主要內容

FE Day 2 環境與工具鏈：Node、pnpm、TypeScript、VS Code

FE Day 2 環境與工具鏈：Node、pnpm、TypeScript、VS Code

執行需求：CPU 可跑。昨天我們畫完四十五天的地圖，今天要實際動手把環境架起來。一個前端專案能不能順利跑起來，有 80% 決定在環境：有沒有裝對 Node.js、有沒有用對套件管理工具、有沒有把 TypeScript 編譯器設定好、有沒有讓編輯器看懂 .tsx。這一篇會帶你把這四件事一次搞定，後續四十三篇都會站在這個地基上。

引言

後端工程師對「環境」這件事並不陌生：裝 Python、設虛擬環境、裝框架、寫 requirements.txt、設 IDE。Node.js 的世界也有一套類似的流程，但因為生態圈更新速度快、工具鏈更碎片，剛轉過來的工程師很容易卡在「裝了但跑不起來」或「能跑但不知道裝了什麼」。本篇要解決的正是這兩個痛點。

這篇文章會做八件事：第一，解釋 Node.js 與 JavaScript 執行環境的關係；第二，說明為什麼選 pnpm 而不是 npm 或 yarn；第三，示範 TypeScript 5.8/5.9 的安裝與編譯器設定；第四，介紹 VS Code 必裝的擴充套件與設定；第五，給出 ESLint 9 flat config 的最小設定檔；第六，示範怎麼用 Vite 7 建立一個能跑的 React + TypeScript 專案；第七，把 package.json 的 scripts 整理成一份可以照抄的清單；第八，把幾個常見的 .npmrc / .nvmrc / .gitignore 設定一次給齊。整篇讀完大約 30 分鐘，動手做大約 30 分鐘。

Node.js 是什麼？為什麼前端要裝它

Node.js 是一個「讓 JavaScript 跑在作業系統上」的執行環境，2009 年由 Ryan Dahl 開源。它採用 Google V8 引擎，把原本只能在瀏覽器裡跑的 JavaScript 變成可以當作系統工具使用。後端工程師可以把它想成「JavaScript 版的 CPython」：裝了 Node.js 之後，node xxx.js 就等同 python xxx.py，而 npm（Node Package Manager）就等同 pip。

為什麼前端要裝 Node.js？因為前端的「建置流程」（build pipeline）需要 Node 來執行：把 .tsx 編譯成 .js、把多個檔案打包成 bundle、跑開發伺服器、跑測試、跑 lint。這些工作全部都跑在 Node 上；瀏覽器最後拿到的只是一份已經處理好的靜態檔案。所以 Node.js 是「工具」而不是「執行環境」——瀏覽器才是 React 程式碼最終跑起來的地方。

Node.js 的版本有兩條線：Current（每年十月發新版，支援六個月）與 LTS（Long Term Support，長期支援版，支援 30 個月）。本系列鎖定 22 LTS 與 24 LTS：22 LTS 在 2024 年 10 月進入維護期、24 LTS 在 2025 年 10 月成為 Active LTS。兩個版本對本系列用到的 API 都足夠。

怎麼確認 Node 版本

裝好 Node 之後，用以下指令確認版本：

node -v
# 輸出：v22.11.0（或 v24.x.x）
npm -v
# 輸出：10.x.x

如果你看到比 22 還舊的版本（例如 v18、v16），那代表你的作業系統用的是「系統內建」的 Node。強烈建議改用 nvm（macOS/Linux）或 fnm（跨平台）來管理版本，避免污染系統環境。

用 nvm / fnm 切換版本

如果你的工作需要同時跑 Node 18（舊專案）與 Node 22（新專案），裝 nvm 或 fnm 是最直覺的做法。fnm 是 Rust 寫的跨平台版本管理器，速度比 nvm 快很多：

# macOS / Linux 安裝 fnm
curl -fsSL https://fnm.vercel.app/install | bash

# 安裝 Node 22 LTS
fnm install 22

# 在當前目錄自動切到 Node 22（會寫進 .node-version 檔案）
fnm use 22

# 確認版本
node -v
# 輸出：v22.x.x

fnm 還有一個好用功能：在包含 .node-version 檔案的目錄自動切換版本。我們會在每個專案根目錄放一份，確保團隊每個人都用同一個 Node：

# 在專案根目錄建立 .node-version
echo "22" > .node-version

這樣無論誰 clone 專案、cd 進來，fnm 都會自動切到 Node 22。後端工程師可以把它想成「Python 的 .python-version（pyenv 用）」。

為什麼選 pnpm 而不是 npm

Node.js 內建的套件管理工具是 npm（Node Package Manager）。它功能齊全、能裝能砍能更新，但有兩個缺點：磁碟用量大（每個專案都各裝一份相同的依賴）與安裝速度中等。pnpm（performant npm）解決了這兩個問題：它用「內容定址儲存」（content-addressable store）把同一個套件版本在所有專案之間共用，硬碟用量可以省下 50% 以上；安裝速度也比 npm 快 2 到 3 倍。

pnpm 還有一個後端工程師會覺得「似曾相識」的設計：嚴格的依賴隔離。npm 與 yarn classic 會把套件的依賴「攤平」到最外層，導致你的程式碼可以意外引用到沒宣告的套件（所謂的幽靈依賴 phantom dependency）；pnpm 用 symlink 結構把每個專案的依賴關在 node_modules/.pnpm/ 下面，你的程式碼只能引用 package.json 裡明確宣告的套件。這條規則會在前幾天讓你覺得有點囉嗦，但能避免很多「在我電腦能跑」的神奇 bug。

安裝 pnpm

官方推薦的安裝方式是用 Corepack，這是 Node.js 16.13 之後內建的工具，可以確保團隊每個人用同樣的 pnpm 版本：

# 啟用 Corepack（Node 內建，不需要額外安裝）
corepack enable

# 用 Corepack 安裝 pnpm 最新穩定版
corepack prepare pnpm@latest --activate

# 確認版本
pnpm -v
# 輸出：9.x.x（或更新）

如果你不想用 Corepack，也可以直接裝：macOS 用 Homebrew brew install pnpm、Windows 用 winget winget install pnpm、Linux 用 curl -fsSL https://get.pnpm.io/install.sh | sh -。本系列所有範例都假設你用 pnpm。

建立第一個 React + TypeScript 專案

裝好 Node 與 pnpm 之後，建立 React 專案最快的方式是用 Vite 的官方範本。Vite 是 2026 年 3 月 React 生態的主流打包工具，比舊的 Create React App（CRA）快 10 到 100 倍，並且原生支援 TypeScript、JSX、CSS Modules 等格式。

# 用 Vite 官方 React + TypeScript 範本建立專案
pnpm create vite@latest hello-fe -- --template react-ts
cd hello-fe

# 安裝依賴
pnpm install

# 啟動開發伺服器
pnpm dev
# 輸出：VITE v7.x.x  ready in xxx ms
# 輸出：Local:   http://localhost:5173/

這個指令會建立一個完整的最小專案，裡面有 src/（React 元件）、public/（靜態檔）、package.json（依賴與 scripts）、tsconfig.json（TypeScript 設定）、vite.config.ts（Vite 設定）。瀏覽器打開 http://localhost:5173/ 就能看到 Vite 的歡迎畫面。

TypeScript 與 tsconfig.json

TypeScript 是 JavaScript 的「超集合」：任何合法的 JavaScript 程式碼都是合法的 TypeScript，多出來的部分是「型別註記」。裝好之後 tsc 編譯器會幫你做型別檢查，發現問題就報錯；沒問題則輸出普通的 JavaScript 給瀏覽器執行。後端工程師可以把它想成「JavaScript 版的 mypy + pydantic 驗證」。

TypeScript 5.8 與 5.9 是 2026 年 3 月當下的主流版本。兩個版本對本系列用到的語法（泛型、條件型別、satisfies 運算子等）都支援。Vite 預設裝的是 5.8，你可以手動升到 5.9：

# 把 TypeScript 升到 5.9
pnpm add -D typescript@5.9

# 確認版本
pnpm tsc -v
# 輸出：Version 5.9.x

Vite 範本預設的 tsconfig.json 已經對 React 專案最佳化，但有幾個地方可以再加強。打開來看：

{
  "compilerOptions": {
    "target": "ES2022",
    "useDefineForClassFields": true,
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",

    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true
  },
  "include": ["src"]
}

幾個關鍵設定值得說明：第一，"target": "ES2022" 表示編譯出來的 JavaScript 用 ES2022 標準（包含 top-level await、私有欄位 #x 等）；第二，"jsx": "react-jsx" 表示 JSX 由新版 React 自動 runtime 處理，你不用在每支檔案 import React from "react"；第三，"strict": true 開啟一整套嚴格模式（包含 strictNullChecks、noImplicitAny 等），這是後端工程師最熟悉的「嚴格把關」；第四，"noUnusedLocals" 與 "noUnusedParameters" 會在你留了沒用到的變數或函式參數時報錯，逼你維持乾淨。Day 3 會把 strict 的每個子選項展開，這裡先看到一個整體輪廓。

另外，建立一個 tsconfig.node.json 給 Vite 設定檔（vite.config.ts）用：

{
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["ES2023"],
    "module": "ESNext",
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "noEmit": true
  },
  "include": ["vite.config.ts"]
}

這份設定「不包含 DOM 函式庫」，避免 Vite 設定檔誤用 document、window 這類瀏覽器專屬 API。Day 3 會再示範怎麼把 tsconfig.json 拆成多份（應用、前端共用、Node 端）。

一個最小的 tsconfig 實戰範例

如果你對上面的選項還是有點抽象，這裡用一段「故意寫錯」的程式碼示範 strict 模式帶來的差異：

// src/greeter.ts
// 故意寫錯的版本：strict 模式會報錯，沒開 strict 不會
function greet(name: string) {
  console.log("Hello, " + name.toUppercase());  // 拼錯方法名
}

greet("後端工程師");
// 輸出 TS 編譯錯誤：
//   Property 'toUppercase' does not exist on type 'string'.
//   Did you mean 'toUpperCase'?

把這段程式碼存檔後跑 pnpm typecheck，TypeScript 會立刻告訴你 toUppercase 拼錯、應該是 toUpperCase。這種「型別層級的拼字檢查」正是後端寫 Python 用 mypy 時最懷念的功能，現在 JavaScript 也有同樣的保護了。

ESLint 9 與扁平設定檔

ESLint 是 JavaScript/TypeScript 的 lint 工具，會自動檢查程式碼風格、常見錯誤。9 版開始推「扁平設定檔」（flat config），把過去散落在 .eslintrc 的多份檔案合併成一個 eslint.config.js，語法更單純、與 TypeScript 的整合也更好。

裝好 Vite 範本之後，預設就有 ESLint，但設定檔是傳統格式。我們把它改成 9 版的扁平設定：

# 移除舊的 ESLint 設定檔
rm .eslintrc.cjs .eslintignore 2>/dev/null

# 裝新的依賴
pnpm add -D eslint@9 @eslint/js typescript-eslint eslint-plugin-react-hooks eslint-plugin-react-refresh

然後新增 eslint.config.js：

// eslint.config.js
// ESLint 9 扁平設定檔：把多份設定合併成一個陣列
import js from "@eslint/js";
import tseslint from "typescript-eslint";
import reactHooks from "eslint-plugin-react-hooks";
import reactRefresh from "eslint-plugin-react-refresh";

export default tseslint.config(
  // 忽略不需要檢查的目錄
  { ignores: ["dist", "node_modules", "coverage"] },

  // 基礎規則
  js.configs.recommended,
  ...tseslint.configs.recommended,

  // 針對 src/ 的 React Hooks 規則
  {
    files: ["src/**/*.{ts,tsx}"],
    plugins: {
      "react-hooks": reactHooks,
      "react-refresh": reactRefresh,
    },
    rules: {
      ...reactHooks.configs.recommended.rules,
      "react-refresh/only-export-components": [
        "warn",
        { allowConstantExport: true },
      ],
    },
  },
);

這個設定檔把「全域規則」、「TypeScript 規則」、「React Hooks 規則」三層合併起來。react-hooks 會檢查你有沒有違反 Hook 的呼叫規則（例如在條件裡呼叫 useState）；react-refresh 是 Vite 的搭配套件，確保 Fast Refresh 正常運作。執行的方式：

# 跑 ESLint 檢查整個 src/
pnpm lint

# 自動修正可修的問題
pnpm lint -- --fix

ESLint 9 與 Prettier 的分工

新手最常問的問題是「ESLint 跟 Prettier 是不是在做一樣的事？」答案是「它們職責不同」。ESLint 管「邏輯層級」的問題：變數沒用、有沒有違反 Hook 規則、潛在的 bug；Prettier 管「格式層級」的問題：縮排幾格、單引號還是雙引號、行尾要不要分號。把兩者串起來的方式是讓 ESLint 9 把格式問題交給 Prettier，不重複檢查：

// eslint.config.js
// 加 prettier 整合：讓 ESLint 不管格式，把格式交給 Prettier
import prettier from "eslint-config-prettier";

export default tseslint.config(
  { ignores: ["dist", "node_modules", "coverage"] },
  js.configs.recommended,
  ...tseslint.configs.recommended,
  // 這一行必須放最後，把已被 Prettier 涵蓋的規則關掉
  prettier,
  {
    files: ["src/**/*.{ts,tsx}"],
    plugins: {
      "react-hooks": reactHooks,
      "react-refresh": reactRefresh,
    },
    rules: {
      ...reactHooks.configs.recommended.rules,
      "react-refresh/only-export-components": [
        "warn",
        { allowConstantExport: true },
      ],
    },
  },
);

裝 eslint-config-prettier 之後，pnpm lint 不會再抱怨「應該用單引號」這類格式問題，留給 Prettier 處理。存檔時 Prettier 自動排版、ESLint 自動修邏輯問題，兩個工具各司其職。後端工程師可以把它想成「flake8 管邏輯、black 管格式」。

VS Code 設定與擴充套件

VS Code 是 2026 年前端社群的主流編輯器（雖然 WebStorm 也有人用）。裝好 VS Code 之後，建議裝以下擴充套件：

  • ESLint（dbaeumer.vscode-eslint）：把 ESLint 9 的錯誤直接顯示在編輯器裡，存檔自動修。
  • Prettier（esbenp.prettier-vscode）：自動排版工具，與 ESLint 互補（ESLint 管邏輯、Prettier 管格式）。
  • Tailwind CSS IntelliSense（bradlc.vscode-tailwindcss）：Tailwind class 自動完成與 hover 預覽（Day 8 開始會用到）。
  • ES7+ React/Redux/React-Native snippets（dsznajder.es7-react-js-snippets）：常用 React 樣板，例如 rfce 自動展開成 React Functional Component Export。
  • Error Lens（Alexander.error-lens）：把錯誤訊息直接顯示在行尾，比預設的小紅色波浪線更顯眼。
  • GitLens（eamodio.gitlens）：強化 Git 整合，對齊後端工程師熟悉的 blame 與 log。

裝好之後，建議建立一份工作區設定 .vscode/settings.json，把團隊的編輯器行為統一：

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "typescript.tsdk": "node_modules/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true,
  "tailwindCSS.experimental.classRegex": [
    ["clsx\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
    ["cn\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
  ]
}

幾個關鍵設定：第一，formatOnSave: true 讓存檔自動排版，避免「改完忘記排版」這種小麻煩；第二，codeActionsOnSave.source.fixAll.eslint 讓 ESLint 在存檔時自動修可修的問題；第三，typescript.tsdk 指向專案內的 TypeScript，避免團隊成員各自裝到不同版本的 TypeScript。第四，tailwindCSS.experimental.classRegex 讓 IntelliSense 認得 clsx(...) 與 cn(...) 內的 className（Day 8 會用到）。

讓 VS Code 在儲存時跑 ESLint 自動修

上面的 "source.fixAll.eslint" 設定背後其實就是「存檔時呼叫 ESLint 的 --fix」。它能處理的範例如下：

// src/sample.ts
// 寫一個有 ESLint 警告的版本，存檔看會不會自動修
function add(a: number, b: number): number {
  const unused = "我沒用到";  // 觸發 no-unused-vars
  return a + b;
}

console.log(add(1, 2));

把這段存檔，VS Code 會立刻把 unused 那行刪掉（或加底線前綴），這就是 source.fixAll.eslint 的效果。如果出現「無法自動修」的錯誤（例如型別錯誤），VS Code 會在那一行顯示紅色波浪線，把游標移過去就能看到完整訊息。

package.json 與 scripts

Vite 範本預設的 package.json 已經有幾個 scripts，但可以再擴充成一份「團隊友善」版本：

{
  "name": "hello-fe",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "preview": "vite preview",
    "lint": "eslint .",
    "lint:fix": "eslint . --fix",
    "typecheck": "tsc --noEmit",
    "format": "prettier --write \"src/**/*.{ts,tsx,css,md}\"",
    "verify": "pnpm typecheck && pnpm lint && pnpm build"
  },
  "dependencies": {
    "react": "^19.1.0",
    "react-dom": "^19.1.0"
  },
  "devDependencies": {
    "@eslint/js": "^9.18.0",
    "@types/react": "^19.1.0",
    "@types/react-dom": "^19.1.0",
    "@vitejs/plugin-react": "^4.3.0",
    "eslint": "^9.18.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-react-hooks": "^5.1.0",
    "eslint-plugin-react-refresh": "^0.4.16",
    "prettier": "^3.4.0",
    "typescript": "^5.9.0",
    "typescript-eslint": "^8.20.0",
    "vite": "^7.0.0"
  },
  "engines": {
    "node": ">=22 <25"
  }
}

幾個重點："type": "module" 表示整個專案用 ESM（ES Modules），.js 檔案裡的 import 與 export 才會被當作模組；"build": "tsc -b && vite build" 先跑 TypeScript 編譯檢查，再跑 Vite build（順序很重要，型別錯了就不要浪費時間打包）；"typecheck": "tsc --noEmit" 不輸出檔案只做型別檢查，CI 上會跑這個；"engines" 鎖定 Node 22–24，避免同事裝到奇怪版本。

驗證整個專案是否健康

裝好所有套件之後，跑一次 pnpm verify 把三個關卡都跑過，確保環境真的可用：

pnpm verify
# 輸出：
# > hello-fe@0.0.0 verify /path/to/hello-fe
# > pnpm typecheck && pnpm lint && pnpm build

# typecheck：跑 TypeScript 編譯，沒錯就靜默通過
# lint：跑 ESLint，沒錯就靜默通過
# build：先跑 tsc，再跑 vite build，最後輸出 dist/

如果三個指令都跑完沒有錯誤訊息，你的工作環境就準備好了。Day 15 會在 verify 加 vitest run、Day 27 會加 playwright test，驗收關卡會愈來愈完整。

常見錯誤與踩雷

第一次把環境架起來，最常踩的雷有四個。第一個是「pnpm install 之後出現 ERR_PNPM_PEER_DEP_ISSUES」。這是 pnpm 在告訴你「某個套件對另一個套件的版本有意見」。大部分時候這只是警告，不會讓專案壞掉；如果你看到 WARN 就跳過，看到 ERR 再去查官方 issue tracker。

第二個是「tsc --noEmit 報 Cannot find module 'react'」。這通常代表 TypeScript 找不到 React 的型別。修法是確認 tsconfig.json 的 moduleResolution 設成 "bundler"（Vite 範本預設），並把 node_modules/@types/react 真的裝好（pnpm add -D @types/react）。

第三個是「ESLint 9 設定檔 eslint.config.js 沒被讀到」。ESLint 9 預設讀的檔名是 eslint.config.js，如果你的檔名是 eslint.config.mjs 或 .eslintrc.js，CLI 會找不到。要嘛改檔名，要嘛在 package.json 加 "type": "module" 並把設定改成 ESM 語法。

第四個是「VS Code 的 TypeScript 版本跟終端機的不一樣」。VS Code 預設用「VS Code 內建 TypeScript」，可能比專案裡裝的版本舊或新。要解決就在 .vscode/settings.json 加 "typescript.tsdk": "node_modules/typescript/lib"，強制 VS Code 用專案版本。

效能與實務提醒

環境架好之後，順手把幾個小檔案補齊。第一，.npmrc 放進專案根目錄，鎖定 pnpm 的行為：

# .npmrc
engine-strict=true
auto-install-peers=true
strict-peer-dependencies=false

engine-strict=true 強制檢查 Node 版本；auto-install-peers=true 自動裝 peer 依賴，減少手動 pnpm add 的次數；strict-peer-dependencies=false 不要把 peer 警告升級為錯誤，避免升級 React 時被不相容警告卡住。

第二，.gitignore 至少要排除這些（Vite 範本預設就有了，但要檢查一遍）：

# .gitignore
node_modules
dist
dist-ssr
*.local

# 編輯器
.vscode/*
!.vscode/settings.json
!.vscode/extensions.json
.idea
.DS_Store

# 測試與覆蓋率
coverage
*.lcov

# 環境變數
.env
.env.*.local

第三，把 verify 跑進 CI（GitHub Actions）：

# .github/workflows/ci.yml
name: CI
on: [push, pull_request]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v4
        with:
          version: 9
      - uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: pnpm
      - run: pnpm install --frozen-lockfile
      - run: pnpm verify

這份 CI 設定做四件事：拉原始碼、裝 pnpm 9、裝 Node 22、安裝依賴（用 frozen lockfile 確保 lockfile 不被偷偷改）、跑 verify。Day 29 部署時會再展開。

裝完上述工具之後，讓我們寫一個小型的 TypeScript 工具函式，順便驗證 tsc 與 ESLint 真的會把關。這支函式處理「把使用者輸入的字串標準化」（去頭尾空白、第一字大寫），是後端寫表單驗證時很常見的需求：

// src/utils/normalize.ts
// 把任意字串標準化成「首字大寫、其餘原樣」
export function normalizeName(raw: string): string {
  const trimmed = raw.trim();
  if (trimmed.length === 0) return "";
  return trimmed.charAt(0).toUpperCase() + trimmed.slice(1);
}

console.log(normalizeName("  hello fe  "));
// 輸出：Hello fe

存檔之後，跑 pnpm typecheck 與 pnpm lint 都應該是靜默通過。如果故意把 trim 改成 trimX，TypeScript 會立刻在 trimX 那一行報 Property 'trimX' does not exist on type 'string'；如果把 trimmed.length 改成 trimmed.lenght（拼錯），編輯器會即時顯示紅色波浪線，存檔時 ESLint 的 no-undef 規則也會提示。這就是「型別 + lint」雙重把關的效果。

另一個值得一試的小範例：用 tsx 直接跑 TypeScript 檔案，繞過 tsc 編譯，適合寫一次性的腳本或測試：

// scripts/check-node.ts
// 用 tsx 直接執行 TypeScript：常用於一次性腳本
import { execSync } from "node:child_process";

const version = execSync("node -v").toString().trim();
console.log("目前 Node 版本：", version);

if (!version.startsWith("v22") && !version.startsWith("v24")) {
  console.error("此專案需要 Node 22 或 24");
  process.exit(1);
}

這支腳本檢查當前 Node 版本是否符合 engines 設定。執行方式：

# 安裝 tsx
pnpm add -D tsx

# 直接執行 TypeScript
pnpm tsx scripts/check-node.ts
# 輸出：目前 Node 版本：v22.x.x

後端工程師可以把 tsx 理解成「TypeScript 版的 python -m」：不需要先編譯、直接執行；常用於 CI 預檢、build script、一次性資料處理。Day 16 與 Day 17 會看到 tsx 在 Next.js 專案的 prisma seed、setup script 中大量使用。

小結

今天我們把整個前端工具鏈蓋起來了：Node.js 22/24 LTS 是基礎，pnpm 9 是套件管理，TypeScript 5.8/5.9 提供型別系統，ESLint 9 flat config 把風格檢查現代化，VS Code 的擴充套件讓編輯器看懂 React 與 TypeScript。這套環境可以撐到中型專案，後續 Day 17 進入 Next.js 時，create-next-app 會基於同一套原則（pnpm + TypeScript + ESLint 9）自動建好，你只要會調整 tsconfig.json 與 eslint.config.js 就能駕馭。明天我們正式進入 TypeScript，把型別系統、tsconfig、泛型、收窄等觀念一個個拆開來講。

結語

明天，我們會正式進入 TypeScript 基礎：原始型別、物件型別、陣列、元組、聯合型別、型別別名、介面的差別，以及 tsconfig.json 的 strict 模式怎麼打開、為什麼值得打開。Day 3 結束時，你應該能用 TypeScript 描述 React 元件的 props 形狀，並看懂編譯器的錯誤訊息，知道怎麼修。Day 4 接著把泛型、條件型別、收窄、工具型別（Pick、Omit、Partial、Readonly）一次學完，到時候寫 React 元件就能享受「型別即說明書」的好處。

延伸資源

  • Node.js Release 工作表（22 LTS / 24 LTS）：https://nodejs.org/en/about/previous-releases
  • pnpm 官方〈Installation〉（9.x）：https://pnpm.io/installation
  • TypeScript Handbook〈tsconfig.json〉（5.9）：https://www.typescriptlang.org/docs/handbook/tsconfig-json.html
  • ESLint 9 官方〈Getting Started〉：https://eslint.org/docs/latest/use/getting-started
  • Vite 官方〈Getting Started〉（7.x）：https://vite.dev/guide/
  • VS Code 工作區設定說明：https://code.visualstudio.com/docs/configure/settings
標籤：

留言

張貼留言

這個網誌中的熱門文章

Day 2 變數與資料型別

Day 2 變數與資料型別 引言 寫程式的過程中，變數與資料型別是處理資料的基礎。變數是存放資料的容器，資料型別則決定這筆資料有哪些特性、可以進行哪些操作。學會定義變數、認識各種資料型別，是學好 Python 的關鍵一步。 這篇文章會帶你了解 Python 中變數的觀念、如何定義變數，以及常見的資料型別，包括整數、浮點數、字串、布林值，還有串列、元組、字典與集合等容器型別。我們也會介紹變數的命名規則與撰寫風格建議，以及如何用 type() 檢查資料型別。 什麼是變數？如何在 Python 中定義變數 變數是在程式執行時用來存放資料的名稱。透過定義變數，我們可以給一筆資料一個名字，並在程式的其他地方用這個名字取用該筆資料。在 Python 中，變數不需要事先宣告型別，因為 Python 是動態型別語言，變數的型別由指定給它的值決定。 定義變數的基本語法 在 Python 中定義變數非常簡單，只要用賦值符號 = 把值指定給變數即可。例如： x = 5 # 定義變數 x，並把整數 5 賦值給它 name = "Alice" # 定義變數 name，並把字串 "Alice" 賦值給它 在這裡，x 是一個變數，被賦予整數 5；name 是另一個變數，被賦予字串 "Alice"。 變數的更新與覆寫 變數的值可以修改，也就是說，我們可以在程式的不同地方給同一個變數新的值。例如： x = 10 # x 最初被賦予 10 x = 15 # x 的值現在被更新為 15 這樣就能依照需求，在程式執行過程中靈活調整變數的值。 Python 的動態型別系統 Python 和某些靜態型別語言不同，定義變數時不需要宣告型別。賦值時，Python 會根據值自動判斷變數的型別。例如： x = 5 # x 是整數 x = 3.14 # x 變成浮點數 x = "Hi" # x 變成字串 同一個變數在程式執行過程中可以存放不同型別的值，這是 Python 的彈性之一。 常見資料型別 在 Python 中，資料型別決定我們可以對變數進行哪些操作...
張貼留言
閱讀完整內容

Day 1 Python 簡介與環境設定

Day 1 Python 簡介與環境設定 引言 在現在的科技環境裡，程式設計已經是一項重要技能。無論你是對資料科學有興趣、想成為開發者，或是想踏入人工智慧（AI）領域，學會寫程式都能明顯提升你的競爭力。在眾多程式語言中，Python 因為語法簡單、功能強大、應用範圍廣泛，成為許多人進入程式世界的第一選擇。這篇文章會帶你認識 Python 的背景與優勢，並一步步教你在不同系統上安裝與設定 Python 開發環境，最後寫出第一支 Python 程式。 為什麼選擇 Python？ Python 是一種高階程式語言，由 Guido van Rossum 在 1991 年發布。Python 的設計哲學強調程式碼的可讀性，並用縮排來定義程式區塊，這點和許多使用大括號的語言不同。簡潔的語法讓它成為初學者的理想選擇；就算是經驗豐富的開發者，也能用它完成複雜的專案。 Python 的優勢如下： 簡單易學 ：Python 的語法清楚、結構簡潔，初學者很快就能上手。和其他語言相比，學習曲線相對平緩，不需要先弄懂一堆複雜觀念，就能開始寫程式。 應用範圍廣泛 ：從資料科學、網頁開發、人工智慧、機器學習、自動化測試到網路爬蟲，Python 都有大量開源函式庫與工具支援，而且在這些領域都扮演關鍵角色。 豐富的函式庫與框架 ：Python 的函式庫生態系非常龐大。做資料分析有 NumPy、Pandas；開發網站有 Django、Flask；做深度學習有 TensorFlow、PyTorch。各種需求幾乎都能找到對應的套件，讓開發更有效率。 跨平台支援 ：Python 支援 Windows、macOS、Linux 等作業系統，程式通常不需要太多修改就能跨平台執行，讓開發與部署更有彈性。 活躍的社群 ：Python 擁有龐大的開發者社群。學習或開發上遇到問題，幾乎都能在社群與論壇（例如 Stack Overflow）找到答案，對初學者來說是很強的後盾，也能減少卡關時的挫折感。 Python 的應用領域 Python 的流行與強大功能，讓許多領域都開始大量使用它。以下是幾個常見的應用方向： 資料科學 ：隨著大數據與人工智慧興起，資料科學大量使用 Python。NumPy、Pandas 與 Matplotlib 等工具能處理和分析龐...
張貼留言
閱讀完整內容

Python 從入門到 PyTorch 深度學習：開啟 AI 世界的大門

Python 從入門到 PyTorch 深度學習：開啟 AI 世界的大門 隨著人工智慧（AI）與深度學習（Deep Learning）快速發展，越來越多人對這些技術產生興趣。不論你是想踏入 AI 領域的初學者，還是已經有程式基礎的開發者，學好 Python 與深度學習框架（例如 PyTorch），都能為你打開更多可能。 為什麼選擇 Python？ Python 已經是資料科學與人工智慧領域的首選語言。它的語法簡潔、容易上手，而且擁有龐大的生態系與大量開源函式庫。無論是資料處理、資料視覺化，還是建立機器學習與深度學習模型，Python 都能勝任。對想進入 AI 或資料科學領域的人來說，它幾乎是必備工具。 PyTorch 是什麼？ PyTorch 是由 Meta（原 Facebook）AI 研究團隊開發的開源深度學習框架，以易用、靈活和動態計算圖著稱，是許多 AI 研究人員與開發者的首選。相較於其他框架，PyTorch 的寫法更貼近原生 Python，對初學者相對友善。無論是簡單的實驗，還是複雜的深度學習模型，PyTorch 都能提供強大的支援。 這個系列能帶給你什麼？ 這個系列會從 Python 的基礎開始，帶你一步一步學習，最後能自己用 PyTorch 建立深度學習模型。即使你完全沒有寫過程式，也能跟著文章的節奏累積技能，理解 AI 與深度學習的核心觀念。 本系列涵蓋的主題 Python 基礎：從變數、條件判斷到函式與模組。 資料處理工具：用 NumPy 與 Pandas 有效率地操作資料。 資料視覺化：用 Matplotlib 與 Seaborn 把資料畫成圖表。 深度學習的數學基礎：線性代數、微積分與機率。 PyTorch 入門：理解張量、模型建構與 GPU 加速。 基礎深度學習模型：CNN 與 RNN 的實作應用。 深度學習專案實戰：從資料前處理到模型部署的端到端流程。 誰適合這個系列？ 程式初學者 ：如果你對 AI 充滿好奇，卻還沒寫過程式，系列的第一部分會帶你快速上手 Python，並幫助你理解深度學習的基本觀念。 資料科學愛好者 ：如果你已經熟悉一些資料處理方法，進階部分會教你如何用 PyTorch 建構深度學習模型。 開發者與研究人員 ：想更深入了...
張貼留言
閱讀完整內容