JavaScript 中使用 TypeScript 進行靜態型別檢查

---

JavaScript 是一種流行的程式語言，以其靈活性和動態特性而聞名。但是，這種靈活性有時會導致大型應用程式中出現意外錯誤和 bug。為了解決這個問題，TypeScript 作為 JavaScript 的超集被引入，它提供了靜態型別檢查功能。在本文中，我們將探討使用 TypeScript 在 JavaScript 中進行靜態型別檢查的基礎知識，以及程式碼示例和解釋，以幫助您入門。

什麼是靜態型別檢查？

靜態型別檢查是一個在編譯時而不是執行時將型別與變數、函式引數和函式返回值關聯的過程。這允許編譯器在程式碼執行之前檢測型別錯誤，從而減少執行時錯誤的機會並提高程式碼質量。

TypeScript：為 JavaScript 帶來靜態型別

TypeScript 擴充套件了 JavaScript 的語法以支援靜態型別。它引入了新的語法和結構，使開發人員能夠顯式定義型別。透過使用 TypeScript，您可以在開發過程中捕獲型別錯誤，受益於更好的程式碼編輯器支援，並提高整體程式碼的可維護性。

安裝 TypeScript

要開始使用 TypeScript，您需要在系統上安裝 Node.js 和 npm（Node 包管理器）。

您可以使用以下命令全域性安裝 TypeScript：

npm install -g typescript

安裝 TypeScript 後，您可以使用 tsc 命令將 TypeScript 程式碼編譯成 JavaScript。

使用型別宣告變數

在 TypeScript 中，您可以使用 :type 語法顯式宣告變數的型別。

示例

讓我們考慮一個示例，我們希望宣告一個名為 message 的字串型別變數：

let message: string = "Hello, TypeScript!";
console.log(message);

解釋

在此程式碼片段中，我們使用 :string 語法將變數 message 宣告為字串。編譯器將強制執行只能將字串值分配給此變數。

輸出

此程式碼的輸出將為：

Hello, TypeScript!

帶型別的函式宣告

TypeScript 允許您為函式引數和返回值定義型別。

示例

讓我們看一個簡單函式的示例，該函式將兩個數字加在一起：

function addNumbers(num1: number, num2: number): number {
   return num1 + num2;
}

let result: number = addNumbers(10, 5);
console.log(result);

解釋

在此程式碼中，addNumbers 函式接受兩個 number 型別的引數並返回一個 number 型別的值。變數 num1、num2 和 result 被顯式地型別化為數字。

輸出

此程式碼的輸出將為：

15

型別推斷

TypeScript 具有強大的型別推斷機制，可以根據其分配的值自動推斷變數的型別。

示例

let age = 25;
console.log(typeof age);

let name = "John";
console.log(typeof name);

在此程式碼中，我們沒有顯式宣告 age 和 name 的型別。但是，TypeScript 根據分配的值推斷其型別。

介面和型別註解

TypeScript 提供介面來定義自定義型別。介面定義物件的結構，包括其屬性的名稱和型別。讓我們考慮一個示例，我們為使用者物件定義一個介面。

示例

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

let user: User = {
   id: 1,
   name: "John Doe",
   email: "john@example.com",
};

console.log(user);

解釋

在此程式碼中，我們定義了一個名為 User 的介面，它具有三個屬性：id、name 和 email。然後，我們宣告一個名為 user 的 User 型別變數，並分配一個符合介面結構的物件。

輸出

此程式碼的輸出將為：

{ id: 1, name: 'John Doe', email: 'john@example.com' }

聯合型別

請考慮以下所示的程式碼。

function displayResult(result: string | number): void {
  console.log("Result:", result);
}

displayResult("Success"); 
displayResult(200); 

解釋

在此示例中，displayResult 函式接受一個可以是字串或數字的引數。這是透過在函式簽名中使用聯合型別 (string | number) 來實現的。

類型別名

type Point = {
   x: number;
   y: number;
};

function calculateDistance(point1: Point, point2: Point): number {
   const dx = point2.x - point1.x;
   const dy = point2.y - point1.y;
   return Math.sqrt(dx * dx + dy * dy);
}  

const p1: Point = { x: 0, y: 0 };
const p2: Point = { x: 3, y: 4 };

console.log(calculateDistance(p1, p2));

解釋

在此示例中，我們為具有 x 和 y 屬性的物件定義了一個類型別名 Point。calculateDistance 函式接受兩個 Point 物件作為引數，並使用勾股定理計算它們之間的距離。

輸出

5

結論

使用 TypeScript 進行靜態型別檢查為 JavaScript 開發帶來了諸多好處，包括儘早捕獲型別錯誤、改進程式碼編輯器支援以及增強程式碼可維護性。透過採用 TypeScript，開發人員可以編寫更安全、更可靠的程式碼，同時仍然可以享受 JavaScript 的靈活性和動態特性。

在本文中，我們探討了使用 TypeScript 在 JavaScript 中進行靜態型別檢查的基礎知識，包括變數宣告、函式宣告、型別推斷、介面、聯合型別和類型別名。掌握了這些知識，您現在就可以開始使用 TypeScript 構建強大且可擴充套件的 JavaScript 應用程式了。