別再讓型別錯誤困擾你，簡單解法大公開

在 TypeScript 中，當我們使用陣列時，必須確保每個陣列中的元素符合我們所定義的型別。例如，如果我們定義一個只接受 string 的陣列，那麼嘗試將 number 加入這個陣列就會導致錯誤。以下是一個例子，我們將嘗試往一個 string[] 型別的陣列中加入一個 number，看看會發生什麼。

程式碼

// Type of deliveryAddresses is string[]

let deliveryAddresses: string[] = [
	'421 Smashing Hill, 90210',
	'221b Paw-ker Street',
	'4347 Whiskers-ia Lane',
]

deliveryAddresses.push(2000);

錯誤提示

let deliveryAddresses: string[] = [
'421 Smashing Hill, 90210',
'221b Paw-ker Street',
'4347 Whiskers-ia Lane',
]

deliveryAddresses.push(2000);

在這個例子中，錯誤發生在 deliveryAddresses.push(2000) 這行，因為 deliveryAddresses 被明確地定義為 string[]，即只接受字串的陣列。而 push 方法試圖將 2000 這個數字插入陣列，但數字型別與字串型別不相容，因此會觸發編譯錯誤。

Errors in code

• Argument of type 'number' is not assignable to parameter of type 'string'.

解讀錯誤訊息

錯誤訊息的意思是：push 方法的參數必須是一個 string，但我們提供了一個 number。TypeScript 的型別檢查會在編譯時期攔截這類型別不一致的情況，防止程式在執行期間發生意外錯誤。

解決步驟

• 檢查變數型別：首先，我們應該確認陣列的型別是否設定正確。在這裡，我們確定 deliveryAddresses 是一個 string[]。
• 轉換型別：如果確實想加入數字，可以將數字轉換為字串，這樣就符合陣列的型別要求。
• 修改 push 的參數：將 deliveryAddresses.push(2000) 修改為 deliveryAddresses.push('2000')，這樣可以避免型別衝突。

最後結果

// Type of deliveryAddresses is string[]

let deliveryAddresses: string[] = [
	'421 Smashing Hill, 90210',
	'221b Paw-ker Street',
	'4347 Whiskers-ia Lane',
]

deliveryAddresses.push(2000); // errors
deliveryAddresses.push('2000'); // OK

演練網址：
TypeScript: TS Playground - An online editor for exploring TypeScript and JavaScript

總結小語

• 嚴格的型別檢查：TypeScript 會在編譯期間檢查型別是否正確，幫助我們提前發現問題。
• 型別不匹配的處理：當 string[] 型別的陣列中插入 number 時，TypeScript 會提示錯誤，防止不正確的資料操作。
• 解決方法：
  1. 轉換型別：將 number 轉換為 string，使其符合陣列的型別要求。
  2. 正確的資料插入：確保插入的資料型別與陣列定義一致。