如果你已經用 Vue 3 寫了一段時間的前端，應該早就發現：<script setup> 裡的變數「什麼都能塞」，今天存數字、明天存字串，等到專案一大、多人協作，bug 就藏在這種「型別黑洞」裡。TypeScript（簡稱 TS）就是來補這個洞的——它在 JavaScript 之上加了一層「型別防護網」，讓錯誤在「寫程式時」就抓出來，而不是等到「上線後」才被使用者抓到。
這篇文章不講枯燥的型別理論，直接帶你從零把 TS 用進日常開發，讓你的前端程式碼更穩健、更好維護。
一、為什麼前端也需要型別？
JavaScript 是動態型別語言，變數可以隨時變身。舉個生活化的例子：你以為 API 回傳的是「數字價格」，結果後端某天改成「字串價格」，你前端 price * 0.9 一算，得到 NaN 還不報錯，畫面就靜悄悄壞掉了。
型別系統的核心價值，是把「執行期才發現的錯誤」提前到「編輯期就攔截」。 這對 Vue 3 這類大型專案尤其關鍵——元件一多，資料結構一改，編輯器立刻用紅線提醒你哪裡沒跟上。
二、五分鐘上手：從基礎型別開始
步驟 1：為變數標註型別。TS 會在賦值錯型別時直接報錯。
let price: number = 100;
let name: string = "廣汽";
let isActive: boolean = true;
// 錯誤示範：TS 會立刻紅線警示
price = "便宜"; // ❌ Type 'string' is not assignable to type 'number'
步驟 2：用介面（interface）描述物件結構，這是前端串接 API 時最常用的武器。
interface Stock {
code: string; // 股票代號
price: number; // 現價
change: number; // 漲跌幅
tags?: string[]; // 可選欄位（加 ?）
}
const gac: Stock = {
code: "02238.HK",
price: 3.0,
change: -0.05
};
重點： 用 interface 定義資料契約，後端改欄位時，前端哪裡沒跟上編輯器一眼就看穿。
三、實戰進階：泛型與函式型別
步驟 3：當你寫一個「不管什麼型別都能用」的工具函式，泛型（generic）就派上用場。例如一個萬用的 API 回傳包裹：
interface ApiResult<T> {
code: number;
data: T;
message: string;
}
async function fetchStock(): Promise<ApiResult<Stock>> {
const res = await fetch("/api/stock/02238");
return res.json();
}
步驟 4：給函式標註參數與回傳型別，避免「傳錯東西進去」。
function calcProfit(cost: number, sell: number): number {
return sell - cost;
}
// calcProfit("3", 5); // ❌ 參數型別不符，編輯期直接擋下
重點： 泛型讓你的工具函式「一次寫好、到處複用」，又不會犧牲型別安全。
四、在 Vue 3 中落地：<script setup lang=”ts”>
步驟 5：在 Vue 單檔元件裡開啟 TS，props 與 emits 都能享有型別提示。
<script setup lang="ts">
interface Props {
title: string;
count?: number;
}
const props = defineProps<Props>();
function add(n: number): void {
console.log(props.title, props.count! + n);
}
</script>
這樣父元件傳錯 props，或你自己在元件內用錯欄位，VSCode 都會即時提醒。
五、避坑清單：幾個新手最常踩的雷
- 別濫用 any：
any會讓型別防護網破洞，能用具體型別就別偷懶用any。 - 嚴格模式（strict）要開： 在 tsconfig.json 打開
"strict": true，才會強制檢查 null / undefined。 - 第三方庫沒型別時： 用
@ts-ignore是下策，優先裝@types/xxx或補.d.ts宣告。 - 型別是契約不是負擔： 一開始慢一點，後面重構快十倍。
重點： TS 不是要不要學的問題，而是「早學早輕鬆」——當你的專案從 10 個檔案長到 100 個，型別就是那根不會斷的救命繩。
互動話題：你在使用 TypeScript 時，最常被哪種型別錯誤「偷襲」過？是 any 地雷、還是泛型寫到懷疑人生？歡迎在留言區分享你的踩坑故事！