数组类型标注

206 阅读2分钟

TypeScript声明类型的方式有两种

const arr: string[] = [];
// 或者
const arr: Array<string> = [];

两种书写的方式是完全等价的,但通常是以第一种为主,如果把鼠标悬停在arr2上,会发现它的类型签名是string[]。有的时候用元组代替数组更加妥当。当一个数组中的元素个数规定,但是进行超长度访问,不会不会报错,而是但因undefined

const arr : string [] = ['aaa','bbb','ccc'];
​
console.log(arr[599])   //打印出的结果是undefined

使用元组

const arr: [string, string, string] = ['aaa', 'bbb', 'ccc'];
​
console.log(arr[599]); // 报错:长度为“3”的元组类型[string,string,string ]在索引599处没有元素。

元组可以声明多个与其位置绑定的,不同类型的元素:

const arr: [string,number,boolean] = ['aaa',1,true];

在这种情况下,对数组合法边界内的索引访问(即 0、1、2)将精确地获得对应位置上的类型。同时元组也支持了在某一个位置上的可选成员:

const arr : [string,number?,boolean?] = ['aaa'];
//也可以写成下面这样
const arr1: [string,number?,boolean?] = ['aaa',,];

strictNullChecks配置为true 时,被标记为可选的成员被看作是string或者undefined类型的。这个元组的长度也会发生变化,比如上面的arr它的长度可能是1,可能是2也可能是3。

也就是说这种有被标记可选成员存在的情况下,这个元组的长度可能是1,可能是2,可能是3

在Type4.0有了具名元组,可以让元组的元素像对象属性一样有名称:

const arr : [name: string,age: number,male: boolean] = ['张三',22,true];

具名元组也可以使用可选修饰符。

数组可能会通过解构赋值的形式造成隐式越界访问(前面提到的越界访问属于显示越界访问)。

// 这就是隐式越界访问
const arr: string[] = [];
const [e1,e2,...list] = arr;
// 因为数组在类型层面不知道有多少个元素

但是元组可以把隐式越界访问给干出来给一个警告

const arr : [string,number,boolean] = ['张三',22,true];
​
const [person,age,male,another] = arr;// 报错:长度为“3”的元组类型“[string,number,boolean]” 在索引“3”处没有元素.