使用更符合主流的 TS 開發模式

基礎概念與主要特性

<aside> 💡 TypeScript 是微軟替JavaScript開發的強型別擴充超集合（Superset），向下支援所有JavaScript的內容。 也可以說JS就是TS的一部份，TS透過編譯後仍然會是JS。它強大的地方在於事先能在編譯過程找到可能發生的型別錯誤(Type Error)，減少潛在錯誤，能讓開發者透過type/interface更清楚知道當前的事件每個變數都是什麼樣的資料結構。

</aside>

• 靜態型別檢查：在編譯時期就能發現型別錯誤
• 向下相容：任何有效的 JavaScript 程式碼都是有效的 TypeScript 程式碼
• 編譯轉換：TypeScript 程式碼會被編譯成純 JavaScript 執行
• 智慧提示（IntelliSense）：程式碼自動完成
• 重構支援：安全的變數重新命名
• 即時錯誤檢測：邊寫邊檢查

靜態型別系統

// JS - 執行時才會知道哪裡錯誤
function greet(name) {
    return "Hello, " + name.toUpperCase();
}
greet(123); // 執行時才報錯

// TS - 編譯時就能發現錯誤
function greet(name: string): string {
    return "Hello, " + name.toUpperCase();
}
greet(123); // 透過run build或者存檔讓Vite編譯時，就會報錯 ❌

Vue的用法釋例:

// JS: 執行時才會知道錯誤
function greet(name) {
    return "Hello, " + name.toUpperCase();
}
greet(123); // 執行時才報錯

// TS: 編譯時就能發現錯誤
function greet(name: string): string {
    return "Hello, " + name.toUpperCase();
}
greet(123); // 編譯時，即存檔讓vite編譯或者 npm run build 、npm run lint 就會報錯 ❌

// Vue 3.5 中的應用
const userName = ref<string>("John");
const greeting = computed(() => {
    return `Hello, ${userName.value.toUpperCase()}`;
});
// userName.value = 123; // ❌ TypeScript 會阻止這個錯誤

自動推斷型別

// 型別會自動推斷為 string
let message = ref("Hello World"); 

// 手動明確指定型別
let message: string ="Hello World"; 
let message = ref<string>("Hello World"); 
let count: number = 42;      
let count = ref<number>(42);

生態系統優勢