使用 TypeScript 在 JavaScript 中進行靜態型別檢查-js教程-PHP中文網

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

PHPz

發布： 2023-09-09 22:57:11

轉載

759 人瀏覽過

使用 TypeScript 在 JavaScript 中进行静态类型检查

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

什麼是靜態型別檢查？

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

TypeScript：將靜態型別引入 JavaScript

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

安裝 TypeScript

要開始使用 TypeScript，您需要在系統上安裝 Node.js 和 npm（節點套件管理員）。

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

npm install -g typescript

登入後複製

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

使用類型宣告變數

在 TypeScript 中，您可以使用 :type 語法明確宣告變數的類型。

範例

讓我們考慮一個例子，我們想要宣告一個字串類型的變數訊息 -

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 函數接受兩個數字類型的參數並傳回一個數字類型的值。變數 num1、num2 和 result 明確鍵入為數字。

輸出

這段程式碼的輸出是 -

登入後複製

類型推斷

TypeScript 擁有強大的型別推斷機制，可以根據變數的賦值自動推斷出變數的型別。

範例

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

let name = "John";
console.log(typeof 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 函數所採用的參數可以是字串或數字。這是透過在函數簽章中使用聯合類型（字串 | 數字）來實現的。

輸入別名

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));

登入後複製