JavaScript (JS) 和 TypeScript (TS) 是軟體開發領域最受歡迎的兩種程式語言。雖然 JavaScript 長期以來一直是 Web 開發的首選語言，但 TypeScript 已成為 JavaScript 的強大超集，提供靜態類型等高級功能。讓我們深入研究這兩種語言，探索它們的用例，並透過實際範例了解它們的細微差別。

JavaScript：現代 Web 開發的基礎

JavaScript 是一種多功能、輕量級的腳本語言，主要用於在網頁上添加互動性。它受到所有現代瀏覽器的支持，並透過 Node.js 等工具擴展到瀏覽器之外。

JavaScript 的主要特性

1. 動態型別：變數不綁定到特定型別。
2. 基於原型的物件定向：物件可以直接從其他物件繼承。
3. 非同步程式設計：Promise 和 async/await 讓處理非同步操作更簡單。

範例：使用 Promise 的非同步編程

function fetchUserData() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve({ id: 1, name: "John Doe" });
        }, 2000);
    });
}

fetchUserData()
    .then((user) => console.log(`User: ${user.name}`))
    .catch((err) => console.error(err));

JavaScript 用例

1. 客戶端腳本：瀏覽器中的動態更新（例如表單驗證）。
2. 後端開發：使用 Express.js 等框架建立 API。
3. 行動應用程式：使用 React Native 等框架。

TypeScript：為 JavaScript 增添力量

TypeScript 透過引入靜態類型建構在 JavaScript 之上，這有助於在編譯時而不是運行時捕獲錯誤。這會產生更健壯且可維護的程式碼。

TypeScript 的主要特性

1. 靜態型別：強制型別安全。
2. 介面：幫助定義物件的形狀。
3. 高級工具：更好的 IDE 支援和自動完成。

範例：TypeScript 的類型安全

function addNumbers(a: number, b: number): number {
    return a   b;
}

// Correct Usage
console.log(addNumbers(5, 10)); // Output: 15

// Incorrect Usage (Caught at Compile-Time)
// console.log(addNumbers(5, "10")); // Error: Argument of type 'string' is not assignable to parameter of type 'number'.

TypeScript 用例

1. 大規模應用程式：強制執行嚴格的類型可以防止大型程式碼庫中的執行階段錯誤。
2. 前端框架：Angular 是用 TypeScript 編寫的。
3. API開發：確保前端與後端之間的資料結構一致。

TypeScript 與 JavaScript：選擇哪一個？

範例：結合 TypeScript 和 JavaScript

您可以使用 TypeScript 編寫乾淨、類型安全的程式碼並將其編譯為 JavaScript 來執行。例如，讓我們在 TypeScript 中定義一個介面：

interface User {
    id: number;
    name: string;
    email: string;
}

function greetUser(user: User): string {
    return `Hello, ${user.name}!`;
}

// Usage
const user: User = { id: 1, name: "Alice", email: "[email protected]" };
console.log(greetUser(user)); // Output: Hello, Alice!

編譯為 JavaScript 時，TypeScript 程式碼變成：

function greetUser(user) {
    return `Hello, ${user.name}!`;
}
const user = { id: 1, name: "Alice", email: "[email protected]" };
console.log(greetUser(user)); // Output: Hello, Alice!

結論

JavaScript 和 TypeScript 在現代開發中都佔有一席之地。 JavaScript 非常適合快速原型設計和動態應用程序，而 TypeScript 則在複雜的大型專案中大放異彩，在這些專案中，可維護性和類型安全性是優先考慮的。兩者之間的選擇取決於您的專案要求和團隊對語言的熟悉程度。

如果您剛開始，首先學習 JavaScript 是一個自然的選擇。一旦您適應了，過渡到 TypeScript 將顯著擴展您的開發能力。

透過了解這兩種語言及其用例，您可以建立從互動式 Web 應用程式到強大的企業解決方案的所有內容。不斷嘗試程式碼，讓 TypeScript 和 JavaScript 賦能您的開發之旅！