TypeScript - 型別註解

型別註解

在 TypeScript 中，型別註解提供了一種定義（或註釋）變數、類成員、函式引數和返回值的資料型別的方式。

TypeScript 是一種靜態型別的程式語言，可以選擇性地支援動態型別。由於這種支援，任何 JavaScript 檔案（.js）都可以直接重新命名為 TypeScript 檔案（.ts）。眾所周知，JavaScript 是一種動態型別的程式語言，而 TypeScript 是 JavaScript 的超集。TypeScript 支援 JavaScript 的所有功能，以及一些額外的特性。

TypeScript 提供瞭如何註釋資料型別的方法。“型別註解”一詞意味著分配資料型別。

變數型別註解

TypeScript 支援變數的靜態型別。我們在宣告變數時可以註釋變數的型別。TypeScript 還可選地支援 JavaScript 中的動態型別。

例如，當我們定義一個儲存數字的變數時，我們可以按如下方式定義它 -

var x = 10;

上述宣告在 TypeScript 中是完全允許的，因為它支援動態型別。

我們可以像下面這樣註釋變數 x 的資料型別 –

var x: number = 10;

要進行型別註解，可以在變數名後面使用冒號 (:)，後面跟著變數的資料型別。

var varName: datatype

以下是使用不同資料型別註釋變數的不同示例。

let name: string;
let age: number;
let isEnrolled: boolean;

在上面的示例中，我們將字串作為變數 name 的型別新增。類似地，age 和 isEnrolled 分別用 number 和 boolean 型別進行了註釋。

示例

讓我們嘗試以下示例。在這個示例中，我們聲明瞭兩個變數 pName 和 pAge。我們將 pName 註釋為字串，pAge 註釋為數字。

let pName: string;
let pAge: number;
pName = "John Doe";
pAge = 35;
console.log(`Name of the person is ${pName} and his age is ${pAge}`);

編譯後，TypeScript 編譯器將生成以下 JavaScript 程式碼 –

let pName;
let pAge;
pName = "John Doe";
pAge = 35;
console.log(`Name of the person is ${pName} and his age is ${pAge}`);

上述 JavaScript 程式碼的輸出如下 –

Name of the person is John Doe and his age is 35

函式型別註解

您可以在 TypeScript 中向函式新增型別。函式的型別有兩個部分 – 函式引數和函式的返回型別。

函式引數型別註解

我們可以在函式定義中註釋引數的資料型別。

function displayDetails(id: number, name: string){ 
   console.log("ID:", id); 
   console.log("Name", name);
}
displayDetails(123,"John");

編譯後，它將生成以下 JavaScript 程式碼 –

function displayDetails(id, name) {
    console.log("ID:", id);
    console.log("Name:", name);
}
displayDetails(123, "John");

上面示例程式碼的結果如下 –

ID: 123
Name: John

函式返回型別註解

您可以新增函式返回的資料型別。它將是函式返回的值的資料型別。

function add (x: number, y: number): number {
   return x + y;
}

如果您沒有編寫返回型別，則任何函式的預設返回型別將為 undefined。

如果函式沒有返回值，則應使用 void 作為函式返回型別，而不是將其省略。

例如，而不是編寫以下內容 –

function greet(name: string){
   console.log(`Hello Mr. ${name}. Welcome to Tutorials Point.`);
}

使用 void 作為返回型別編寫函式，如下所示 –

function greet(name: string): void {
   console.log(`Hello Mr. ${name}. Welcome to Tutorials Point.`);
}

示例

在下面的示例中，我們註釋了函式引數及其返回型別。函式 add 接收兩個引數 - x 和 y，型別為 number，以及一個型別為 number 的值。返回值是傳遞給函式的引數的總和。

function add(x: number, y: number): number {
    return x + y;
}

console.log(add(2,3))

編譯後，它將生成以下 JavaScript 程式碼 –

function add(x, y) {
    return x + y;
}
console.log(add(2, 3));

上述程式碼的輸出如下 −

物件屬性型別註解

您可以使用型別註解向物件的屬性新增型別。

讓我們使用介面定義一個物件，如下所示 −

interface Person {
   name: string;
   age: number;
}
const person: Person = {
   name: "John Doe",
   age: 35,
}

在上面的示例中，我們分別將字串和數字型別新增到 name 和 age 屬性。

您只能將字串值分配給 name 屬性，類似地，只能將數字值分配給 age 屬性。假設您嘗試向 age 新增字串，它將丟擲錯誤。

型別“string”無法分配給型別“number”。

示例

讓我們舉一個完整的例子。在這個例子中，我們定義了一個名為 Person 的介面，它有兩個屬性 – name 和 age。name 屬性註釋為字串，age 註釋為數字。我們使用介面 Person 建立一個名為 person 的物件。然後最後，我們在控制檯中顯示物件屬性。

interface Person {
   name: string;
   age: number;
}
const person: Person = {
   name: "John Doe",
   age: 35,
}
console.log(`The person's name is ${person.name} and person's age is ${person.age}`);

編譯後，它將生成以下 JavaScript 程式碼 −

const person = {
    name: "John Doe",
    age: 35,
};
console.log(`The person's name is ${person.name} and person's age is ${person.age}`);

上述示例程式碼的輸出如下 −

The person's name is John Doe and person's age is 35

建議在 TypeScript 中對變數、函式引數和返回型別的型別註解等進行型別註解。但 TypeScript 也像 JavaScript 一樣支援動態型別。正如您已經知道的那樣，TypeScript 支援所有 ECMAScript 特性。

列印頁面