07. TypeScript 中元组的使用和类型约束

TypeScript 中提供了元组的概念，这个概念是JavaScript中没有的。但是不要慌，其实元组在开发中并不常用，也可能是我的精力还不够。一般只在数据源是CVS这种文件的时候，会使用元组。其实你可以把元组看成数组的一个加强，它可以更好的控制或者说规范里边的类型。

元组的基本应用

我们先来看一个数组和这个数组注解的缺点，比如我们有一个小姐姐数组，数组中有姓名、职业和年龄，代码如下：

const xiaojiejie = ["xiaohong", "teacher", 28];

这时候把鼠标放到xiaojiejie变量上面，可以看出推断出来的类型。我们就用类型注解的形式给他作一个注解，代码如下：

const xiaojiejie: (string | number)[] = ["xiaohong", "teacher", 28];

这时候你已经增加了代码注解，但是这并不能很好的限制，比如我们把代码改成下面的样子，TypeScript依然不会报错。

const xiaojiejie: (string | number)[] = ["xiaohong", 28, "teacher"];

我们只是简单的把数组中的位置调换了一下，但是TypeScript并不能发现问题，这时候我们需要一个更强大的类型，来解决这个问题，这就是元组。

元组和数组类似，但是类型注解时会不一样。

const xiaojiejie: [string, string, number] = ["xiaohong", "teacher", 28];

这时候我们就把数组中的每个元素类型的位置给固定住了，这就叫做元组。

元组的使用

目前我的工作中不经常使用元组，因为如果要使用元组，完全可以使用对象的形式来代替，但是如果你维护老系统，你会发现有一种数据源时CSV，这种文件提供的就是用逗号隔开的，如果要严谨的编程就需要用到元组了。例如我们有这样一组由CSV提供的（注意这里只是模拟数据）。

"xiaohong", "teacher", 28;
"xiaoli", "teacher", 18;
"xiaofang", "teacher", 25;

如果数据源得到的数据是这样的，你就可以使用元组了。

const xiaojiejies: [string, string, number][] = [
  ["xiaohong", "teacher", 28],
  ["xiaoli", "teacher", 18],
  ["xiaofang", "teacher", 25],
];

这节你要学会的的主要内容是，你要搞清楚元组和数组的区别，在理解后能在项目中适当的时候使用不同的类型。