TypeScript 元組型別詳解


我們將學習 TypeScript 中的元組型別。在 JavaScript 中,陣列可以包含不同資料型別的元素。但是,由於 TypeScript 是 JavaScript 的超集,也是一種型別嚴格的語言,因此 TypeScript 陣列只能包含單一型別的元素。

因此,元組允許我們在 TypeScript 陣列中儲存不同資料型別的元素。此外,當我們在元組中儲存元素時,元素的順序很重要;否則,TypeScript 編譯器在編譯程式碼時可能會生成錯誤。

語法

您可以按照以下語法在 TypeScript 中定義元組。

let sample_tuple: [string, number, data_types of other variables ...];
sample_tuple = ['TypeScript', 95, other values according to data types];

在上述語法中,使用者可以看到我們需要定義我們想要放在每個索引上的值的型別。它可以包含任意數量的元素,但需要為每個索引定義型別。

示例 1(定義元組)

在下面的示例中,我們建立了一個長度為四的元組。元組在第一個索引處包含數字,在第二個索引處包含布林值,在第三個和第四個索引處分別包含字串和數字。

使用者可以註釋掉最後給出的程式碼,並嘗試編譯它,看看當我們在元組中新增更多元素或以隨機順序新增元素時會發生什麼錯誤。

// defining the tuple of length four
let sample_tuple: [number, boolean, string, number] = [
   10,
   true,
   "TutorialsPoint",
   90,
];

let values: string =
   sample_tuple[0] +
   " " +
   sample_tuple[1] +
   " " +
   sample_tuple[2] +
   " " +
sample_tuple[3];
console.log("The value of tuple elements is " + values);

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

// defining the tuple of length four
var sample_tuple = [
   10,
   true,
   "TutorialsPoint",
   90,
];
var values = sample_tuple[0] +
   " " +
   sample_tuple[1] +
   " " +
   sample_tuple[2] +
   " " +
   sample_tuple[3];
console.log("The value of tuple elements is " + values);

輸出

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

The value of tuple elements is 10 true TutorialsPoint 90

示例 2(元組陣列)

在這個例子中,我們定義了元組的型別。之後,我們建立了 `array_tuple` 型別的陣列,其中包含多個元組。

使用者可以看到我們如何像訪問二維陣列一樣訪問特定元組中的值。

//  defining the type for the tuple array

//  tuple is of length two containing the number and boolean value
type array_tuple = [number, boolean];

//  defining the array of tuple
let array: array_tuple[] = [
   [1, true],
   [2, false],
   [3, false],
   [4, true],
];

// accessing the values from the different index of tuple
console.log("The value of index 1 is " + array[1]);
console.log("The value of index 2 is " + array[2]);
console.log(
   "The value of index 3 and 2nd index in the nested array is " + array[3][1]
);

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

//  defining the array of tuple
var array = [
   [1, true],
   [2, false],
   [3, false],
   [4, true],
];

// accessing the values from the different index of tuple
console.log("The value of index 1 is " + array[1]);
console.log("The value of index 2 is " + array[2]);
console.log("The value of index 3 and 2nd index in the nested array is " + array[3][1]);

輸出

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

The value of index 1 is 2,false
The value of index 2 is 3,false
The value of index 3 and 2nd index in the nested array is true

示例 3(向元組新增值)

在下面的示例中,我們建立了一個布林值和數字型別的元組。初始化元組時,我們不能新增超過元組型別中定義的值。初始化元組時,我們需要按照元組型別中定義的相同順序初始化一個數字和一個布林值。

之後,要向元組新增值,我們可以使用 `push()` 方法,如下例所示。

// creating the tuple of type number and boolean
var tuple: [boolean, number] = [true, 20];

// adding only a boolean value
tuple.push(false);

// pushing only number values
tuple.push(99);

// pushing number and boolean both
tuple.push(101, true);
console.log("The values of the tuple is " + tuple);

// tuple doesn't allow to push the elements of string type as 

// it can contain an only number and boolean values

// tuple.push("hi");

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

// creating the tuple of type number and boolean
var tuple = [true, 20];

// adding only a boolean value
tuple.push(false);

// pushing only number values
tuple.push(99);

// pushing number and boolean both
tuple.push(101, true);
console.log("The values of the tuple is " + tuple);

// tuple doesn't allow to push the elements of string type as
 
// it can contain an only number and boolean values

// tuple.push("hi");

輸出

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

The values of the tuple is true,20,false,99,101,true

示例 4(從函式返回元組)

在這個例子中,我們建立了一個函式 `getIntAndString()`,它返回數字和字串型別的元組。元組的一個主要好處是它可以用來從函式返回多個值。

此外,使用者可以透過下面的例子學習如何將從函式返回的元組解構到另一個元組。

//  function, which returns the tuple of type number and string
function getIntAndString(): [number, string] {
  return [10, "TutorialsPoint!"];
}

// stored returned tuple from the function
let tuple: [number, string] = getIntAndString();

console.log("The value of the tuple is " + tuple);

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

//  function, which returns the tuple of type number and string
function getIntAndString() {
   return [10, "TutorialsPoint!"];
}

// stored returned tuple from the function
var tuple = getIntAndString();
console.log("The value of the tuple is " + tuple);

輸出

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

The value of the tuple is 10,TutorialsPoint!

在本教程中,我們學習了元組型別。我們還透過不同的例子演示了元組的不同用法。我們學習瞭如何建立元組、訪問元組中的元素、建立元組陣列以及使用元組從函式返回多個值。

更新於:2023年1月17日

263 次瀏覽

啟動你的職業生涯

透過完成課程獲得認證

開始學習
廣告
© . All rights reserved.