接上一篇:TypeScript实例讲解(三)
本篇内容:如何对数组和元组进行类型注解。
数组的类型注解
// 例 1
const numberArr: number[] = [1, 2, 3];
数组 numberArr 中只能存在数值类型的项。
// 例 2
const arr: (number | string)[] = [1, 2, 3, 'a'];
数组 arr 中既可能存在数值类型的值,又可能存在字符串类型的值。
// 例 3
const objectArr: {name: string}[] = [{name: 'bear'}];
数组 objectArr 存在的每一项都必须是一个对象。
我们想一想,上面例3中如果对象属性较多时代码就会很长,看起来非常难懂。这时候我们就可以使用 类型别名 来解决这个问题。
类型别名
类型别名顾名思义就是给一个类型起一个新名字。通过类型别名可以使代码结构更清晰。
说明:类型别名使用 type 关键字定义。
// 例 4
type User = {
name: string,
age: number
}
const userList: User[] = [
{name: 'bear', age: 10}
];
上面的例子中,userList 数组中,每一项都必须是一个对象,而且每个对象都必须包含 name 和 age 两个属性,不能缺失,也不能多余。
另外,类型别名也常用于联合类型(后面会讲到)。
元组(tuple)
// 例 5
const point: (string | number)[] = ['敦煌', 94.670, 40.155];
例5中定义的 point 数组只会有三个值,而且第一个值代表地点,第二和第三个值代表坐标。看上去没有问题,但是我们交换数组项的顺序或者改变数组项的数量后依然满足条件。
因此某些场景下,仅靠数组的约束力无法满足需求。为了满足上面的需求,元组 就出现了。
// 例 6
const point: [string, number, number] = ['敦煌', 94.670, 40.155];
上面例6中定义了一个元组 point,元组可以看作是数组的拓展,它表示已知元素数量和类型的数组。确切地说,是已知数组中每一个位置上的元素的类型。当我们为 tuple 赋值时,各个位置上的元素类型都要对应,元素个数也要一致。
本篇完!如果文章对你有一点点帮助,请记得点个赞哦。