typescript 数组_TypeScript元组

小咪咪 2022-11-27 04:28 179阅读 0赞

typescript 数组

Sometimes we like to store values in an array with specific types. Using the `any` type can of course solve this problem but it will also allow certain types we might not want. This where tuples come in.

有时我们喜欢将值存储在具有特定类型的数组中。 当然，使用`any`类型可以解决此问题，但它也允许某些我们可能不想要的类型。 元组进入的地方。

Say we want to create a `user` array of a `userName` and a `userId`;

假设我们要创建一个`userName`和`userId`的`user`数组；

let user: any;
    let userId = 1;
    let userName = "Alf";
    
    let randomBoolean = true;
    
    user = [userId, userName]; // valid
    user = [userId, randomBoolean]; // also valid

By setting our `user` to be of the `any` type, we can assign any type to it and this defeats our purpose of having a `userId` which is a `number` and a `userName` which is a `string` type. We can use a **tuple** to solve this.

通过将`user`设置为`any`类型，我们可以为其分配任何类型，这违背了我们的目的：使用`userId`作为`number` ，使用`userName`作为`string`类型。 我们可以使用**元组**来解决这个问题。

let user: [number,string];
    let userId = 1;
    let userName = "Alf";
    let randomBoolean = true;
    
    user = [userId, userName]; // valid
    user = [userId, randomBoolean]; // error: Type 'true' is not assignable to type 'string'

We define a **tuple** by putting our intended types into square brackets and comma-separated, in this case, a `number` and a `string`. Now if we pass-in a type that isn’t defined in the tuple, say a `boolean`, we get an error message that says:

我们通过将预期类型放入方括号并用逗号分隔(在这种情况下为`number`和`string`定义**元组** 。 现在，如果我们传入未在元组中定义的类型，例如`boolean` ，则会收到一条错误消息，内容为：

**Type ‘true’ is not assignable to type 'string’.**

**类型“ true”不可分配给“字符串”类型。**

This is because we defined our tuple to accept a `string` as it’s second input but we passed in a `boolean`.

这是因为我们将元组定义为接受`string`作为第二个输入，但是我们传入了`boolean` 。

### 访问元组中的元素 **(**Accessing elements in a tuple**)** ###

To access an element in a tuple, we use it’s index just like in an array.

要访问元组中的元素，我们就像在数组中一样使用它的索引。

console.log(user[0])  // 1
    console.log(user[1])  // Alf

--------------------

Tuples become very useful when we want to create a dictionary or a key-value pair. Using our example from above, we can have an array of user names and their ids without mistakenly passing in a different type to create problems later.

当我们要创建字典或键值对时，元组变得非常有用。 使用上面的示例，我们可以拥有一个用户名及其ID数组，而不会错误地传入其他类型以以后产生问题。

let users: [number, string][] = [[1,"Alf"],[2,"Jane"],[3,"Nii"]];

When assigning values to a tuple, the first two values must match exactly the types defined in the tuple.

将值分配给元组时，前两个值必须与元组中定义的类型完全匹配。

For example, in our example above, our first element has to be a `number` and the second, a `string`. If we interchange the values, we will get an error even though their types have been defined in the tuple.

例如，在上面的示例中，我们的第一个元素必须是`number` ，第二个元素必须是`string` 。 如果我们交换值，即使在元组中定义了它们的类型，我们也会得到一个错误。

let user: [number,string];
    user = ["Alf", 1]; // invalid

The above code is invalid because, `user` expects the first element to be a `number` and the second a `string`, but not vice-versa.

上面的代码无效，因为`user`希望第一个元素是`number` ，第二个元素是`string` ，反之亦然。

Any subsequent value we add to the tuple variable can be any of the predefined tuple types in no particular order.

我们添加到tuple变量的任何后续值都可以是任何预定义的tuple类型，而没有特定的顺序。

user[2] = "John"; // valid
    user[3] = 4; // valid
    user[4] = true; // invalid.

In the above code, because the tuple was declared with a `number` and a `string`, we can input an element of either the `string` or `number` in no order provided they aren’t the first two elements. We still can’t assign a `boolean` value to an element because the tuple wasn’t declared with a `boolean` type.

在上面的代码中，由于元组是用`number`和`string` ，因此我们可以按任意顺序输入`string`或`number`的元素，只要它们不是前两个元素即可。 我们仍然无法为元素分配`boolean`值，因为未使用`boolean`类型声明元组。

That’s it. Hope you found this post useful. ✨

而已。 希望您发现这篇文章有用。 ✨

> 翻译自: [https://www.digitalocean.com/community/tutorials/typescript-tuples][https_www.digitalocean.com_community_tutorials_typescript-tuples]

typescript 数组

[https_www.digitalocean.com_community_tutorials_typescript-tuples]: https://www.digitalocean.com/community/tutorials/typescript-tuples