Interface V.S. Type

為變數添加類型

let productName: string = "纯棉 T 恤";
let price: number = 10;
let isAvailable: boolean = true;

為物件添加類型

let product: {
  title: string;
  price: number;
  inStock: boolean;
} = {
  title: "纯棉T恤",
  price: 99.8,
  inStock: true,
};

// product.count = 30;
// product.title = 12;
// product = {
//   count: 30,
// };

product.title = "牛仔裤";
product = {
  title: "牛仔裤",
  price: 32,
  inStock: false,
};

使用type定義可重複使用的物件類型

type Product = {
  title: string;
  price: number;
  inStock: boolean;
};

let product: Product = {
  title: "纯棉T恤",
  price: 99.8,
  inStock: true, // 是否有库存
};

let product2: Product = {
  title: "牛仔裤",
  price: 66,
  inStock: false,
};

? 定義可選用的物件類型

type Product = {
  title: string; // 属性名 : 类型
  price?: number;
  inStock?: boolean;
};

let product: Product = {
  title: "纯棉T恤",
};

使用interface定義可重複使用的物件類型(推薦使用)

interface Product {
  title: string;
  price?: number;
  inStock?: boolean;
}

let product: Product = {
  title: "纯棉T恤",
  price: 20,
  inStock: true,
};

interface 與 type 的差別

interface 較方便進行擴展，添加新的屬性，因此推薦使用 interface

interface Product {
  title: string;
  price: number;
  inStock: boolean;
}

interface Product {
  count: number;
}

let product: Product = {
  title: "纯棉T恤",
  price: 20,
  inStock: true,
  count: 100,
};

使用interface定義巢狀物件類型

interface Product {
  title: string;
  price: number;
  inStock: boolean;
  category: Category;
}

interface Category {
  name: string;
}

let product: Product = {
  title: "纯棉T恤",
  price: 20,
  inStock: true,
  category: {
    name: "上衣",
  },
};

相當於

interface Product {
  title: string;
  price: number;
  inStock: boolean;
  category: {
    name: string;
  };
}

let product: Product = {
  title: "纯棉T恤",
  price: 20,
  inStock: true,
  category: {
    name: "上衣",
  },
};

為陣列添加類型

 let nums: number[] = [1, 2, 3];
 // let nums: Array<number> = [1, 2, 3]; 亦可

interface Product {
  title: string;
  price: number;
  inStock: boolean;
}

let products: Product[] = [
  {
    title: "纯棉T恤",
    price: 20,
    inStock: true,
  },
  {
    title: "牛仔裤",
    price: 88,
    inStock: true,
  },
];