隨記

Week 02 · Day 02 — TypeScript 陣列與介面

學習目標

  • 學會宣告有型別的陣列
  • 學會用 interface 定義物件的形狀
  • 理解可選屬性 ?

重點

陣列 

let numbers: number[] = [1, 2, 3];
let names: Array<string> = ["Alice", "Bob"]; // 泛型寫法，效果相同
let mixed: (string | number)[] = ["a", 1];   // 混合陣列

介面（interface） - 用來描述一個物件的「形狀」 - 類似契約：物件的欄位必須符合定義 

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

使用介面 

const user: User = {
  name: "John",
  age: 30
  // email 可省略（因為是 ? 可選）
};
const full: User = {
  name: "Jane",
  age: 25,
  email: "jane@example.com"
};

重點觀念 - interface 只用於型別，不會編譯成 JS（編譯後消失） - 缺一個必要欄位（如 name）就會報錯 - ? = 可選，可有可無

實作

interface Product {
  id: number;
  name: string;
  price: number;
  discount?: number;
}

const products: Product[] = [
  { id: 1, name: "Coffee", price: 120 },
  { id: 2, name: "Tea", price: 80, discount: 0.1 }
];

products.forEach(p => console.log(p.name, p.price));
再試著刪掉 name，觀察介面強制的錯誤。

作業

  • 宣告一個 number[] 與一個 Array<string>
  • 用自己的領域建立一個 User 或 Product 介面
  • 說明可選屬性 ? 的作用