📜  如何在 TypeScript 中定义不同泛型类型的数组?

📅  最后修改于: 2021-10-29 03:38:09             🧑  作者: Mango

在打字稿中,数组是一种数据类型,可以顺序存储不同数据类型的多个值。与 JavaScript 类似,Typescript 支持数组声明,并且有多种方法可以做到。

声明和初始化数组:

  • 我们可以使用 var 或 let 来声明一个数组。
  • 不同之处在于如果我们希望在整个程序中反映/实现变量并为特定块使用let ,则使用var
  • 以下是语法

方法一:在单独的行上声明和初始化:这里我们声明一个数组并在单独的行上初始化,如下面的例子。它通常用于生成更清晰可读的代码。如果我们已经知道数组的类型,则使用方括号,如果使用泛型(不限于一种数据类型),则使用箭头括号。

从 0 开始的数组声明和初始化

这里我们用一个泛型类型number来声明digits数组,所以第一个数字23表示数组的类型(number)。如果不声明数组的类型,则归类为any。

Javascript
var fruits: Array;
fruits = ['Kiwi', 'Plums', 'Peaches','Apples','Lime','Cherries'];
 
var Digits: Array;
Digits = [23, 34, 100, 124,];


Javascript
/* First method of usual array with
square brackets and second method of
generic arrays for examples fruits
and Digits */
 
var fruits: string[] = ['Kiwi', 'Plums',
    'Peaches', 'Apples', 'Lime', 'Cherries'];
 
var fruits: Array < String >= ['Kiwi', 'Plums',
    'Peaches', 'Apples', 'Lime', 'Cherries'];
 
var Digits: number[] = [23, 34, 100, 124];
var Digits: Array < number >= [23, 34, 100, 124]


Javascript
/* In the first example we're associating
string with string and second example
vivek has 2 values 3 and 5, as we can have
multiple values */
var Capital: (string | string)[] = ['USA',
    'Washington D.C.', 'United Kingdom',
    'London', 'India', 'New Delhi',
    'Thailand', 'Bangkok'
];
// or
var Employees: Array < string | number >
    = ['Atul', 1, 'Vivek', 3, 5, 'Sania', 8];


Javascript
var Chocolates: string[] = ['White',
    'Dark', 'SemiSweet', 'BitterSweet'];
 
Chocolates[0]; // Returns White
Chocolates[1]; // Returns Dark
Chocolates[2]; // Returns SemiSweet
Chocolates[3]; // Returns BitterSweet
Chcoloates[4]; // Returns undefined


Javascript
// Using loop for the given array
let Cities: string[] = ['Pune', 'Mumbai', 'Nagpur'];
 
 
for (var i = 0; i < Cities.length; i++) {
 
    // Output: Pune Mumbai Nagpur
    console.log(Cities[i]);
}
 
for (var i in Cities) {
 
    // Output: Pune Mumbai Nagpur
    console.log(Cities[i]);
}


方法 2:在同一行声明和初始化:在同一行声明和初始化数组的替代方法。

例子:

Javascript

/* First method of usual array with
square brackets and second method of
generic arrays for examples fruits
and Digits */
 
var fruits: string[] = ['Kiwi', 'Plums',
    'Peaches', 'Apples', 'Lime', 'Cherries'];
 
var fruits: Array < String >= ['Kiwi', 'Plums',
    'Peaches', 'Apples', 'Lime', 'Cherries'];
 
var Digits: number[] = [23, 34, 100, 124];
var Digits: Array < number >= [23, 34, 100, 124]

请注意,第一种方法和第二种方法之间的区别纯粹是为了更清晰的代码。

声明多类型数组:类型用“|”分隔对于每种类型,每个都对应于前一个元素。在下面的例子中,国家的首都是配对的(泰国代表曼谷,新德里代表印度),在第二个例子中,我们没有数字 5 的字符串,这意味着它是独立的,只占用空间像其他元素一样。

Javascript

/* In the first example we're associating
string with string and second example
vivek has 2 values 3 and 5, as we can have
multiple values */
var Capital: (string | string)[] = ['USA',
    'Washington D.C.', 'United Kingdom',
    'London', 'India', 'New Delhi',
    'Thailand', 'Bangkok'
];
// or
var Employees: Array < string | number >
    = ['Atul', 1, 'Vivek', 3, 5, 'Sania', 8];

访问数组元素:

方法一:索引访问(直接访问):当我们知道数组的索引和大小时,直接访问是可能的。在上面的例子中,我们知道“Dark”占据 1 个索引,因此我们 Chocolates[1],它返回 White。但是如果数组长度太长就很乏味,因此我们使用第二种方法(循环)。

Javascript

var Chocolates: string[] = ['White',
    'Dark', 'SemiSweet', 'BitterSweet'];
 
Chocolates[0]; // Returns White
Chocolates[1]; // Returns Dark
Chocolates[2]; // Returns SemiSweet
Chocolates[3]; // Returns BitterSweet
Chcoloates[4]; // Returns undefined

方法 2:使用循环:对于较大的数组,可能会使用循环而不是直接访问来减少代码行数并获得更清晰的代码。在下面的示例中,我们使用 for 循环解析城市数组并相应地打印它。

或者,如果我们不知道数组的大小,我们使用“in”数组来打印相同的内容。

Javascript

// Using loop for the given array
let Cities: string[] = ['Pune', 'Mumbai', 'Nagpur'];
 
 
for (var i = 0; i < Cities.length; i++) {
 
    // Output: Pune Mumbai Nagpur
    console.log(Cities[i]);
}
 
for (var i in Cities) {
 
    // Output: Pune Mumbai Nagpur
    console.log(Cities[i]);
}