型別系統，讓你在專案中脫穎而出

你是否曾經覺得在寫程式時，總是會有些小錯誤偷偷溜進來，讓你頭痛不已？🤯

別擔心，TypeScript 的型別系統就像是你的專屬超級英雄，時刻守護你的程式碼，讓它更安全、更穩固！
今天我們來聊聊如何運用 TypeScript 的型別系統，不僅能輕鬆搞定那些棘手的陣列方法，還能讓你的專案品質直接升級！🚀

實際應用場景：結合業務邏輯的陣列方法

在處理大型數據集時，像是對電子商務網站的商品列表進行過濾與排序，我們可以使用 filter 來篩選符合特定條件的商品，並且透過 sort 來根據評分或銷量對商品進行排序。

// 定義商品的型別
type Product = {
  name: string;
  price: number;
  inStock: boolean;
  rating: number;
};

// 假設我們有一個產品清單
const products: Product[] = [
  { name: "Laptop", price: 1200, inStock: true, rating: 4.5 },
  { name: "Phone", price: 800, inStock: false, rating: 4.0 },
  { name: "Tablet", price: 600, inStock: true, rating: 3.8 },
];

// 篩選出庫存中的產品，並根據評分從高到低排序
const availableProducts: Product[] = products
  .filter((product: Product) => product.inStock)
  .sort((a: Product, b: Product) => b.rating - a.rating);

console.log(availableProducts);

這裡我們明確地定義了 Product 的型別，在操作時都有型別保護， filter 來篩選出有庫存的商品，接著用 sort 根據銷量進行排序。這樣的操作在電子商務平台非常常見，透過 filter 和 sort 可以讓你輕鬆達到業務需求。

方法選擇與最佳實踐：filter 與 map

理解 filter 和 map 的應用場景並正確使用它們非常重要。
filter 用來篩選元素，map 則是對每個元素進行轉換操作。

// 定義商品的型別
type Product = {
  name: string;
  price: number;
  inStock: boolean;
  rating: number;
};

// 選擇價格低於1000元的產品，並轉換其價格顯示為帶有貨幣符號
const affordableProducts: { name: string; price: string }[] = products
  .filter((product: Product) => product.price < 1000) // 篩選價格低於1000的產品
  .map((product: Product) => ({ 
    name: product.name, 
    price: `$${product.price}` 
  })); // 將價格轉換為帶符號的字串

console.log(affordableProducts);

我們透過明確的型別定義，讓 map 返回的每個物件都符合新的格式，同時確保每個步驟都有型別檢查。

性能比較：forEach 與 map 的選擇與應用

當處理大型數據集時，選擇正確的迭代方法非常重要。
map 會返回一個新陣列，而 forEach 則不會。
因此，當我們僅需遍歷數據而不需要返回新數據時，forEach 是更高效的選擇。

// 使用 forEach 對每個商品進行操作
products.forEach((product: Product): void => {
  console.log(`Product: ${product.name}, Price: ${product.price}`);
});

使用 forEach 來遍歷數據集時，無需創建新的陣列，這在處理大型數據集時能節省記憶體和 CPU 資源，從而提升性能。
與此相對，map 會返回一個新陣列，這樣在不需要返回結果的情況下反而會浪費資源。

型別系統強化：使用 ReadonlyArray 保護資料的不可變性

在一些情境下，我們希望資料保持不可變，避免意外的修改。ReadonlyArray 可以幫助我們實現這樣的目標。

type ReadonlyProductArray = ReadonlyArray<Product>;

// 使用 ReadonlyArray 保證 products 陣列不會被修改
const readonlyProducts: ReadonlyProductArray = [
  { name: "Laptop", price: 1200, inStock: true, rating: 4.5 },
  { name: "Phone", price: 800, inStock: false, rating: 4.0 },
];

// readonlyProducts.push({ name: "Tablet", price: 600, inStock: true, rating: 3.8 }); // 報錯：因為陣列是唯讀的

通過使用 ReadonlyArray，我們可以確保陣列中的資料不會被意外修改，這對於大型應用程式中特別重要，能提升應用的穩定性與資料一致性。

多層次範例：複合方法的應用與解釋

複雜的業務邏輯通常需要結合多個陣列方法來處理。
結合 filter、map 和 reduce 可以有效簡化處理邏輯，並保持程式碼的簡潔和可讀性。

// 定義商品的型別
type Product = {
  name: string;
  price: number;
  inStock: boolean;
  sales: number;
};

// 計算庫存商品的總銷售額
const totalSales: number = products
  .filter((product: Product) => product.inStock) // 篩選出有庫存的商品
  .map((product: Product) => product.sales) // 取得每個商品的銷量
  .reduce((total: number, sales: number) => total + sales, 0); // 計算總銷售額

console.log(`Total sales: ${totalSales}`);

這裡，我們先使用 filter 篩選出有庫存的商品，接著用 map 取得它們的銷量，最後透過 reduce 計算出總銷售額。
這種方法組合在處理複雜數據集時非常實用。

錯誤處理：正確使用 reduce 並避免常見錯誤

reduce 是一個強大的方法，但也容易出現潛在的錯誤，特別是在處理未定義值時。
確保 reduce 使用正確的初始值，可以避免出現 undefined 的情況。

// 定義購物車的商品型別
type CartItem = {
  product: string;
  price: number;
  quantity: number;
};

// 假設我們有一個購物車清單
const cart: CartItem[] = [
  { product: "Laptop", price: 1200, quantity: 1 },
  { product: "Phone", price: 800, quantity: 2 },
];

// 使用 reduce 計算購物車的總價
const totalPrice: number = cart.reduce(
  (total: number, item: CartItem) => total + item.price * item.quantity,
  0 // 使用初始值 0，避免 undefined
);

console.log(`Total price: ${totalPrice}`);

在這裡，我們正確地使用了 reduce，並指定初始值為 0，避免了計算時出現未定義的情況。這是使用 reduce 的一個最佳實踐。

本文小結

1. 業務邏輯與陣列操作結合：filter 和 sort 讓你可以根據特定條件篩選和排序大型數據集，適用於電子商務等應用場景。

2. 正確選擇迭代方法以提升性能：在不需要返回新陣列的情況下，forEach 比 map 更適合處理大型數據集，能節省系統資源並提高效率。

3. ReadonlyArray 保護資料的不可變性：通過使用 ReadonlyArray，確保陣列中的資料不會被修改，提升資料管理的穩定性與一致性。

4. 多層次方法組合應用：結合 filter、map 和 reduce，你可以有效地處理複雜業務邏輯，保持程式碼簡潔且具有可讀性。

5. 正確使用 reduce 並避免錯誤：指定 reduce 的初始值，避免未定義值引發的潛在錯誤，特別是在累計計算時。

6. 掌握陣列方法的應用場景：不同的陣列方法如 filter、map、reduce 等，針對不同業務需求進行靈活搭配使用，讓你在處理資料時更具彈性與效率。

這些總結能幫助你更靈活地應用 TypeScript 的型別系統與陣列方法，讓專案開發更加順利且高效。

記住，程式碼不僅僅是解決問題的工具，更是你創造力的展現！
💡透過善用 TypeScript 的型別系統與陣列方法，你不僅能讓程式更穩健，也能讓開發變得更加愉快和充滿成就感！💪✨

所以，繼續探索，持續進步，未來的你一定會感謝現在努力的自己！🚀