哈囉大家好，今天來聊聊TS的錯誤訊息、例外，還有該如何debug。

一、Type 'string' is not assignable to type 'number'

遇到的情境：

這應該是最常見到的錯誤，當開發者將某個值指定給一個型別不符合的變數時，就可能看到這個錯誤。

let age: number = "20"; //Type 'string' is not assignable to type 'number'

因為明確宣告age是number型別，但卻塞了一個字串進去。就算這個字串長得很像數字，TypeScript也不會幫你自動轉型，它只會照著宣告的型別去判斷。

debug

//法一：直接給正確的型別
let age: number = 20;

//法二：如果資料來源真的是字串（例如表單輸入），要手動轉型
let ageInput: string = "20";
let age: number = Number(ageInput);

二、Object is possibly 'undefined'

遇到的情境

這個錯誤通常出現在想存取一個「可能不存在」的屬性或值的時候。

interface User {
	name: string;
	profile?: {
		age: number;
	};
}

const user: User = { name: "小明" };

console.log(user.profile.age); 
//Object is possibly 'undefined'

因為profile這個屬性後面有加 ?，代表它是可選屬性，它有可能是undefined。TypeScript 會提醒開發者profile可能不存在

debug

//法一：使用可選鏈(Optional Chaining)
console.log(user.profile?.age);

//法二：先做判斷再存取
if (user.profile) {
	console.log(user.profile.age);
}

//法三：給預設值
console.log(user.profile?.age ?? "沒有年齡資料");

三、Property 'xxx' does not exist on type ...

遇到的情境

這個錯誤通常發生在開發者存取的屬性，並沒有被目前這個型別定義時。

interface Student {
	 name: string;
	score: number;
}

const student: Student = { 
	name: "小華", 
	score: 90 
};

console.log(student.grade); 
//Property 'grade' does not exist on type 'Student'

Student這個 interface裡根本沒有定義grade這個屬性，TS就會針對這個問題而報錯。

debug

//法一：檢查是否有打錯字
console.log(student.score);

//法二：如果這個屬性應該要存在，就在interface中補上
interface Student {
	name: string;
	score: number;
	grade: string; // 補上缺少的屬性
}

const student: Student = { name: "小華", score: 90, grade: "A" };

四、Argument of type ... is not assignable to parameter of type ...

遇到的情境

通常出現在呼叫函式的時候，傳進去的參數型別跟函式預期的不一樣。

function greet(name: string): string {
	return `哈囉，${name}！`;
}

greet(123); 
//Argument of type 'number' is not assignable to parameter of type 'string'

greet函式明確要求參數是string，但我們卻傳了一個number進去。TS在編譯階段就先幫忙擋下這個可能會出包的呼叫方式。

debug

//法一：傳入對的型別
greet("小明");

//法二：如果來源真的不確定，先轉型再傳入，確認把number轉成string確實符合程式原本的需求。
greet(String(123));

//法三：如果這個函式本來就該接受多種型別，把型別放寬
function greet(name: string | number): string {
	return `哈囉，${name}！`;
}

小結

今天整理了常見的四種錯誤訊息和應對的方式，明天開始就是實作的部分了，今天的內容就到這邊，我們明天見！