TypeScript 如何使用

學會了如何安裝 TypeScript 之後，讓我們來了解 TypeScript 的基本使用方式和編譯流程。

TypeScript 檔案

TypeScript 程式碼寫在副檔名為 .ts 的檔案中。如果是包含 JSX 語法的 React 元件，則使用 .tsx 副檔名。

hello.ts      ← 一般的 TypeScript 檔案
App.tsx       ← 包含 JSX 的 TypeScript 檔案

編譯 TypeScript

TypeScript 程式碼不能直接被瀏覽器或 Node.js 執行，需要先編譯成 JavaScript。

編譯單一檔案

tsc hello.ts

這會在同目錄下產生 hello.js 檔案。

編譯整個專案

如果專案中有 tsconfig.json 設定檔，直接執行 tsc 即可編譯整個專案：

tsc

監看模式 (Watch Mode)

在開發過程中，可以使用監看模式，當檔案變更時自動重新編譯：

tsc --watch
# 或簡寫
tsc -w

第一個 TypeScript 程式

讓我們寫一個簡單的程式來體驗 TypeScript：

// greeting.ts

// 定義一個函式，參數 name 必須是 string 型別
function greet(name: string): string {
  return `哈囉，${name}！`;
}

// 正確的呼叫方式
console.log(greet('世界'));

// 如果傳入錯誤的型別，TypeScript 會報錯
// greet(123);  // 錯誤：型別 'number' 的引數不可指派給型別 'string' 的參數

編譯後產生的 JavaScript：

// greeting.js
function greet(name) {
  return `哈囉，${name}！`;
}
console.log(greet('世界'));

注意：編譯後的 JavaScript 沒有型別標註，因為 JavaScript 本身不支援型別語法。

TypeScript 與 JavaScript 的差異

型別標註

TypeScript 最明顯的特徵就是型別標註：

// 變數型別標註
let message: string = 'Hello';
let count: number = 42;
let isActive: boolean = true;

// 函式參數和回傳值型別標註
function add(a: number, b: number): number {
  return a + b;
}

介面 (Interface)

TypeScript 可以定義物件的結構：

interface User {
  name: string;
  age: number;
  email?: string; // 可選屬性
}

function printUser(user: User) {
  console.log(`${user.name}, ${user.age} 歲`);
}

printUser({ name: '小明', age: 25 });

型別推論

TypeScript 可以自動推論型別，不需要每個地方都寫型別標註：

// TypeScript 自動推論 message 是 string 型別
let message = 'Hello';

// TypeScript 自動推論回傳值是 number 型別
function add(a: number, b: number) {
  return a + b;
}

執行 TypeScript

傳統方式：編譯後執行

# 1. 編譯
tsc hello.ts

# 2. 執行
node hello.js

使用 ts-node 直接執行

ts-node 可以直接執行 TypeScript 檔案，不需要手動編譯：

# 安裝 ts-node
npm install -g ts-node

# 直接執行 TypeScript 檔案
ts-node hello.ts

使用 tsx 直接執行 (推薦)

tsx 是更快速的 TypeScript 執行工具：

# 安裝 tsx
npm install -g tsx

# 直接執行 TypeScript 檔案
tsx hello.ts

# 監看模式
tsx watch hello.ts

在網頁中使用 TypeScript

在前端專案中，通常會搭配打包工具 (bundler) 來處理 TypeScript：

Vite (推薦)

# 建立 Vite + TypeScript 專案
npm create vite@latest my-app -- --template vanilla-ts
cd my-app
npm install
npm run dev

Webpack

需要安裝 ts-loader 或 babel-loader 來處理 TypeScript 檔案。

線上練習 TypeScript

如果你想快速測試 TypeScript 程式碼，可以使用：

TypeScript Playground：官方提供的線上編輯器，可以即時看到編譯結果和型別檢查
StackBlitz：線上 IDE，支援完整的 TypeScript 專案
CodeSandbox：線上開發環境，支援多種框架的 TypeScript 範本

常見編譯錯誤

剛開始學習 TypeScript 時，可能會遇到一些編譯錯誤：

型別不符

let name: string = 123;
// 錯誤：Type 'number' is not assignable to type 'string'

屬性不存在

let user = { name: '小明' };
console.log(user.age);
// 錯誤：Property 'age' does not exist on type '{ name: string; }'

參數數量錯誤

function greet(name: string) {
  console.log(`Hello, ${name}`);
}
greet();
// 錯誤：Expected 1 arguments, but got 0

這些錯誤訊息雖然一開始看起來有點嚇人，但它們是 TypeScript 在幫助你避免潛在的 bug！