TypeScript实例讲解(四)

1,047 阅读2分钟

接上一篇: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 赋值时,各个位置上的元素类型都要对应,元素个数也要一致。

本篇完!如果文章对你有一点点帮助,请记得点个赞哦。