TypeScript 與 JavaScript：初學者的指南
你好，未來的編程超級巨星！我很興奮能成為你進入 TypeScript 和 JavaScript 世界的導遊。作為一個教了多年編程的人，我迫不及待地想與你分享我的知識和經驗。所以，拿起你喜歡的飲料，舒適地坐好，我們來一起深入探討吧！
JavaScript：網頁的語言
我們先從 JavaScript 開始，這個自 1995 年以來一直在風靡一時的酷炫小子。它就像編程語言中的瑞士軍刀——多用途、廣泛使用，對網頁開發來說是必不可少的。
什麼是 JavaScript？
JavaScript 是一種高級、解釋型編程語言，主要用於創建互動式網頁。它讓靜態的 HTML 和 CSS 有了生命，使網站變得動態和響應式。
讓我們看一個簡單的 JavaScript 範例：
let greeting = "Hello, World!";
console.log(greeting);在這個微小的片段中，我們聲明了一個名為 greeting 的變量，並將其值設為 "Hello, World!"。然後，我們使用 console.log() 將這個問候語打印到控制台。這就像給其他開發者（或你未來的自己）留下了一個友好的便條！
JavaScript 的實際應用
現在，讓我們看看 JavaScript 做一些更令人興奮的事情：
function calculateAge(birthYear) {
let currentYear = new Date().getFullYear();
return currentYear - birthYear;
}
let myAge = calculateAge(1990);
console.log("I am " + myAge + " years old");在這裡，我們創建了一個根據出生年來計算年齡的函數。這就像一個迷你時間機！我們使用 Date 對象來獲取當前年份，然後做一些簡單的數學計算來確定年齡。相當厲害，不是嗎？
TypeScript：JavaScript 的優雅表親
現在，讓我們來認識 TypeScript —— 想像一下 JavaScript 去讀了個結業生並帶回了一副单片眼镜和一頂高頂禮帽。TypeScript 是 JavaScript 的超集，這意味著它擁有 JavaScript 的所有特性，再加上一些額外的花絮。
什麼是 TypeScript？
TypeScript 是由微软開發的，用以彌補 JavaScript 的一些不足，特別是在開發大型應用程序時。它為 JavaScript 添加了可選的靜態類型、類和模塊，使早期發現錯誤和編寫更健壯的代碼變得更加容易。
讓我們看一個 TypeScript 的範例：
function greet(name: string): string {
return `Hello, ${name}!`;
}
let message: string = greet("TypeScript");
console.log(message);注意到函數中 name 參數和函數後面的 : string 了嗎？那是 TypeScript 的方式，它在說："嘿，這應該是一個字符串！" 它就像在你的代碼中添加了護欄來防止愚蠢的錯誤。
JavaScript 和 TypeScript 的關鍵差異
現在我們已經見過兩種語言，讓我們將它們並排放在一起比較。想像一下我們在一個編程語言的時尚秀上（請將就一下這個比喻）：
1. 項型系統
JavaScript 以一個鬆弛、流動的服裝走秀——它是動態類型的，意味著變量可以在飛行中改變類型。而 TypeScript 則以一件剪裁得體的西裝出場——它是靜態類型的，確保一切都非常合適。
2. 編譯
JavaScript 預設就可以使用——它是解釋型的，直接在瀏覽器中運行。TypeScript 需要先變身——它被編譯成 JavaScript 後才能運行。
3. 工具支持
JavaScript 有個不錯的化妝包，有良好的 IDE 支持。而 TypeScript 則帶來了一整個魅力團隊——它的靜態類型允許在 IDE 中進行更好的自動完成、重構和錯誤捕獲。
4. 學習曲線
JavaScript 就像學騎自行車——起初可能有些挑戰，但你可以很快開始騎行。TypeScript 則更像學騎獨輪車時還要玩雜技——它的學習曲線更陡峭，但你所學到的技能令人印象深刻！
讓我們用一個方便的表格來視覺化這些差異：
| 特性 | JavaScript | TypeScript |
|---|---|---|
| 項型系統 | 動態 | 靜態（可選） |
| 編譯 | 解釋型 | 編譯到 JavaScript |
| 瀏覽器支持 | 直接 | 需要編譯 |
| 工具支持 | 良好 | 出色 |
| 學習曲線 | 中等 | 更陡峭 |
| 人氣 | 非常高 | 高並持續成長 |
當使用 JavaScript？
當以下情況時，JavaScript 是你的首选語言：
- 你正在構建一個簡單的網站或網絡應用程序。
- 你需要快速原型化一個想法。
- 你的項目規模較小，不需要複雜的架構。
- 你正在與更熟悉 JavaScript 的團隊合作。
以下是一個 JavaScript 發光的快速範例：
document.getElementById('myButton').addEventListener('click', function() {
alert('You clicked the button!');
});這段代碼為一個按鈕添加了事件監聽器。當單擊按鈕時，它會顯示一個提示框。簡單、有效，並且非常適合小範圍的交互需求！
當使用 TypeScript？
當以下情況時，TypeScript 是你的最佳夥伴：
- 你正在開發一個大型應用程序。
- 你需要更好的工具和錯誤捕獲。
- 你想使用面向對象的編程特性。
- 你正在與一個團隊合作，並希望實施更严格的編碼標準。
讓我們看看 TypeScript 在一個更複雜的場景中的應用：
interface User {
name: string;
age: number;
}
class UserDatabase {
private users: User[] = [];
addUser(user: User): void {
this.users.push(user);
}
getUser(name: string): User | undefined {
return this.users.find(user => user.name === name);
}
}
let database = new UserDatabase();
database.addUser({ name: "Alice", age: 30 });
let user = database.getUser("Alice");
console.log(user); // 輸出: { name: "Alice", age: 30 }在這個範例中，我們定義了一個用戶接口，創建了一個 UserDatabase 類，並使用 TypeScript 的類型系統來確保我們在整個過程中使用正確的數據類型。這就像有一個個人的助手為你 double-check 所有事情！
至於你，各位！我們已經對 JavaScript 和 TypeScript 進行了一次旋風式的旅行。記住，兩種語言都有其優勢，選擇它們就像為工作選擇正確的工具一樣。JavaScript 是你的可靠瑞士軍刀，而 TypeScript 則是你的高科技多工具。
在你繼續編程旅程的過程中，你將會發展出對於何時使用每一種語言的感覺。現在，嘗試使用它們，享受樂趣，並不要害怕犯錯誤——這是我們所有人學習和成長在這個美妙編程世界中的方式！
Credits: Image by storyset