TypeScript中的型別註解

---

TypeScript是JavaScript的超集，它為該語言添加了可選的靜態型別。這意味著TypeScript允許開發人員指定變數、函式引數和函式返回值的型別。此功能有助於在開發過程的早期捕獲錯誤，並使程式碼更健壯。

在TypeScript中，型別註解用於指定變數、函式引數和函式返回值的型別。在本教程中，我們將探討在TypeScript中使用型別註解的不同場景以及它們如何幫助開發人員編寫更好的程式碼。

使用型別註解宣告變數

語法

在TypeScript中使用型別註解建立變數的語法如下：

let variableName: type;

這裡，variableName是變數的名稱，type是變數的型別。讓我們來看一個例子：

示例1

let num1: number = 10;
console.log(num1);

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

var num1 = 10;
console.log(num1);

輸出

以上程式碼將產生以下輸出：

10

在上面的例子中，我們聲明瞭一個型別為number的變數num1，併為其賦值10。然後使用console.log()函式將變數的值列印到控制檯。

示例2

let Name: string = "John";
console.log("Hello, " + Name);
// Note that I used "Name" instead of just "name"
// "name" wouldn’t work because it is already declared in the lib.dom.d.ts file in the TypeScript library

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

var Name = "John";
console.log("Hello, " + Name);
// Note that I used "Name" instead of just "name"
// "name" wouldn’t work because it is already declared in the lib.dom.d.ts file in the TypeScript library

輸出

以上程式碼將產生以下輸出：

Hello, John

在上面的例子中，我們聲明瞭一個型別為string的變數name，併為其賦值“John”。然後我們使用+運算子將變數的值與一個字串連線起來，並使用console.log()函式將結果列印到控制檯。

帶有型別註解的函式引數

型別註解也可以用於指定函式引數的型別。

語法

在TypeScript中使用型別註解建立函式的語法如下：

function functionName(parameterName: type): returnType {
   // function body
}

這裡，functionName是函式的名稱，parameterName是引數的名稱，type是引數的型別。讓我們來看一個例子：

示例1

function add(num1: number, num2: number): number {
   return num1 + num2;
}
console.log(add(2, 3));

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

function add(num1, num2) {
   return num1 + num2;
}
console.log(add(2, 3));

輸出

以上程式碼將產生以下輸出：

5

在上面的例子中，我們建立了一個名為add的函式，它接受兩個型別為number的引數，並返回一個型別為number的值。然後我們用引數2和3呼叫該函式，並使用console.log()函式將結果列印到控制檯。

示例2

function greet(name: string): string {
   return "Hello, " + name;
}
console.log(greet("John"));

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

function greet(name) {
   return "Hello, " + name;
}
console.log(greet("John"));

輸出

以上程式碼將產生以下輸出：

Hello, John

在上面的例子中，我們建立了一個名為greet的函式，它接受一個型別為string的引數，並返回一個型別為string的值。然後我們用引數“John”呼叫該函式，並使用console.log()函式將結果列印到控制檯。

帶有型別註解的函式返回值

型別註解也可以用於指定函式返回值的型別。

語法

在TypeScript中使用返回型別註解建立函式的語法如下：

function functionName(): returnType {
   // function body
}

這裡，functionName是函式的名稱，returnType是函式返回值的型別。讓我們來看一個例子：

示例1

function getRandomNumber(): number {
   return Math.random();
}
console.log(getRandomNumber());

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

function getRandomNumber() {
   return Math.random();
}
console.log(getRandomNumber());

輸出

以上程式碼將產生以下輸出：

0.3822812708614216

在上面的例子中，我們建立了一個名為getRandomNumber的函式，它返回一個型別為number的隨機數。然後我們呼叫該函式，並使用console.log()函式將結果列印到控制檯。

示例2

function getUser(): { name: string, age: number } {
   return { name: "John", age: 30 };
}
console.log(getUser());

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

function getUser() {
   return { name: "John", age: 30 };
}
console.log(getUser());

輸出

以上程式碼將產生以下輸出：

{ name: 'John', age: 30 }

在上面的例子中，我們建立了一個名為getUser的函式，它返回一個包含兩個屬性name和age的物件。然後我們呼叫該函式，並使用console.log()函式將結果列印到控制檯。

陣列和物件的型別註解

型別註解也可以用於指定TypeScript中陣列和物件的型別。

語法

在TypeScript中使用型別註解建立陣列或物件的語法如下：

let arrayName: type[] = [];
let objectName: { key1: type1, key2: type2, ... } = {};

這裡，arrayName是陣列的名稱，type是陣列元素的型別，objectName是物件的名稱，key1、key2等是物件的鍵，type1、type2等是物件屬性的型別。讓我們來看一個例子：

示例1

let numbers: number[] = [1, 2, 3, 4, 5];
console.log(numbers);

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

var numbers = [1, 2, 3, 4, 5];
console.log(numbers);

輸出

以上程式碼將產生以下輸出：

[ 1, 2, 3, 4, 5 ]

在上面的例子中，我們聲明瞭一個型別為number的陣列numbers，並用一些值對其進行了初始化。然後使用console.log()函式將陣列的值列印到控制檯。

示例2

let person: { name: string, age: number } = { name: "John", age: 30 };
console.log(person);

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

var person = { name: "John", age: 30 };
console.log(person);

輸出

以上程式碼將產生以下輸出：

{ name: 'John', age: 30 }

在上面的例子中，我們聲明瞭一個物件person，它有兩個屬性：型別為string的name和型別為number的age。然後我們用一些值初始化該物件，並使用console.log()函式將該物件列印到控制檯。

結論

TypeScript中的型別註解是一個強大的功能，可以幫助開發人員編寫更好的程式碼。透過指定變數、函式引數和函式返回值的型別，TypeScript可以在開發過程的早期捕獲錯誤，並使程式碼更健壯。在本教程中，我們探討了在TypeScript中使用型別註解的不同場景以及如何使用它們來改進程式碼。