TypeScript - 元組

有時，可能需要儲存各種型別值的集合。陣列無法滿足此目的。TypeScript 為我們提供了一種稱為元組的資料型別來實現此目的。

它表示異構值的集合。換句話說，元組可以儲存不同型別的多個欄位。元組也可以作為引數傳遞給函式。

語法

我們可以使用 JavaScript 的陣列語法建立元組

const tupleName = [value1, value2, value3, ...valueN]

但我們需要將其型別宣告為元組。

const tupleName: [type1, type2, type3, ...typeN] = [value1, value2, value3, ...valueN]

例如

const myTuple: [number, string] = [10,"Hello"];

您可以先定義一個元組，然後進行初始化，

let myTuple: [number, string]; // declaring the tuple
myTuple = [10, "Hello"]; // initializing the tuple

請確保，宣告的const元組必須進行初始化。

您也可以在 Typescript 中宣告一個空元組，並選擇稍後對其進行初始化。

var myTuple = []; 
myTuple[0] = 10;
myTuple[1] = "Hello";

訪問元組中的值

元組值分別稱為項。元組是基於索引的。這意味著元組中的項可以使用其對應的數字索引進行訪問。元組項的索引從零開始，一直到 n-1（其中 n 是元組的大小）。

語法

以下是使用其索引訪問元組中值的語法：

tupleName[index]

示例：簡單元組

var myTuple: [number, string] = [10,"Hello"]; //create a tuple 
console.log(myTuple[0]) 
console.log(myTuple[1])

在上面的示例中，聲明瞭一個元組myTuple。該元組分別包含數值型別和字串型別的值。

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

var myTuple = [10, "Hello"]; //create a tuple 
console.log(myTuple[0]);
console.log(myTuple[1]);

其輸出如下：

10 
Hello

示例：空元組

我們可以如下宣告一個空元組，然後對其進行初始化。

var tup = [] 
tup[0] = 12 
tup[1] = 23 

console.log(tup[0]) 
console.log(tup[1])

編譯後，它將在 JavaScript 中生成相同的程式碼。

其輸出如下：

12 
23

元組操作

TypeScript 中的元組支援各種操作，例如推送新項、從元組中刪除項等。

示例

var myTuple: [number, string, string, string]; 
myTuple = [10,"Hello","World","typeScript"]; 
console.log("Items before push " + myTuple.length)

myTuple.push(12) // append value to the tuple 
console.log("Items after push " + myTuple.length) 
console.log("Items before pop " + myTuple.length)
 
// removes and returns the last item
console.log(myTuple.pop() + " popped from the tuple") 
console.log("Items after pop " + myTuple.length)

push() 將一個項追加到元組
pop() 刪除並返回元組中的最後一個值

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

var myTuple;
myTuple = [10, "Hello", "World", "typeScript"];
console.log("Items before push " + myTuple.length);
myTuple.push(12); // append value to the tuple 
console.log("Items after push " + myTuple.length);
console.log("Items before pop " + myTuple.length);
// removes and returns the last item
console.log(myTuple.pop() + " popped from the tuple"); 
console.log("Items after pop " + myTuple.length);

以上程式碼的輸出如下：

Items before push 4 
Items after push 5 
Items before pop 5 
12 popped from the tuple 
Items after pop 4

更新元組

元組是可變的，這意味著您可以更新或更改元組元素的值。

示例

var myTuple: [number, string, string, string]; // define tuple
myTuple = [10,"Hello","World","typeScript"]; // initialize tuple
console.log("Tuple value at index 0 " + myTuple[0]) 
//update a tuple element 
myTuple[0] = 121     
console.log("Tuple value at index 0 changed to   " + myTuple[0])

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

var myTuple; // define tuple
myTuple = [10, "Hello", "World", "typeScript"]; // initialize tuple
console.log("Tuple value at index 0 " + myTuple[0]);
//update a tuple element 
myTuple[0] = 121;
console.log("Tuple value at index 0 changed to   " + myTuple[0]);

以上程式碼的輸出如下：

Tuple value at index 0 10 
Tuple value at index 0 changed to 121

解構元組

解構是指分解實體的結構。TypeScript 在元組的上下文中使用時支援解構。

示例

var a: [number, string] = [10,"hello"];
var [b, c] = a;
console.log( b );    
console.log( c );

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

var a = [10, "hello"];
var b = a[0], c = a[1];
console.log(b);
console.log(c);

其輸出如下：

10
hello

函式引數和元組型別

我們可以定義一個函式來顯式地接受元組型別。因此，在呼叫函式時，我們將元組作為引數傳遞。

示例

function processData(data: [string, number]): void {
    const [name, age] = data;
    console.log(`Name: ${name}, Age: ${age}`);
}
let data: [string, number] = ["John", 32]
processData(data);

我們在這裡定義了一個函式processData()，它接受一個元組型別的引數。在函式內部，我們使用元組解構來獲取組成元素。我們呼叫該函式，並將元組作為引數傳遞。

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

function processData(data) {
    const [name, age] = data;
    console.log(`Name: ${name}, Age: ${age}`);
}
let data = ["John", 32];
processData(data);

以上程式碼的輸出如下：

Name: John, Age: 32

列印頁面