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],
];

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

以上关于07. TypeScript 中元组的使用和类型约束的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。