隨記

Week 02 · Day 04 — TypeScript 箭頭函式、可選參數與聯合型別

學習目標

學會箭頭函式（Arrow Function）
使用可選參數與預設值
理解聯合型別

重點

箭頭函式

const multiply = (a: number, b: number): number => a * b;

- 語法：(參數) => 回傳 - 簡寫：單一表達式可直接回傳（省略 return 與大括號） - 是 Angular 中非常常見的寫法（如 map / filter 回呼）

可選參數 ?

function greet(name: string, greeting?: string): string {
  return `${greeting || "Hello"}, ${name}!`;
}
greet("John");                  // "Hello, John!"
greet("John", "Hi");            // "Hi, John!"

預設值（另一種做法）

function greet2(name: string, greeting = "Hello"): string {
  return `${greeting}, ${name}!`;
}

聯合型別（Union Type） - 用 | 表示「型別 A 或型別 B」

function format(input: string | number): string {
  if (typeof input === "number") {
    return input.toFixed(2);     // 數字：取兩位小數
  }
  return input.toUpperCase();    // 字串：轉大寫
}
format(3.14159);  // "3.14"
format("hello");  // "HELLO"

- 用 typeof 縮小型別後再操作

實作

const square = (n: number): number => n * n;

function describe(input: string | number): string {
  return typeof input === "number"
    ? `numeric: ${input * 2}`
    : `text: ${input}`;
}

console.log(square(4), describe(10), describe("hi"));

作業

用箭頭函式重寫一個函式
建立含可選參數的函式，並測試有/無傳參時輸出
建立一個接收 string | number 的函式，用 typeof 分流處理