typeScript-数组类型

数组类型

在TypeScript中,数组的定义方式有多种,比较灵活。

「类型+方框号」表示法

最简单的方法是试用「类型+方框号」表示数组

let arr : number[] = [1,2,3,4]

如果规定了其数组类型,数组项中不允许出现其他类型的,否则报错

let arr : number = [1,2,3,4]
arr[4] = '234
// ERROR in 
// TS2322: Type 'string' is not assignable to type 'number'.

数组的一些方法的参数也会根据数组在定义时约定的类型进行限制

let arr : number[] = [1,23,4]
arr.push('232')
// ERROR in 
//  TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.

上例中,push方法只允许传入number类型的参数,但是却传了一个string类型的参数,因此报错了

数组泛型

我们也可以使用数组泛型(Array Generic) Array来表示数组

let arr2 :Array<number> = [1,2,3,4]

用接口也可以表示数组

interface NumberArray {
  [index:number] :number
}
let arr2 :NumberArray = [1,2,3,4]

NumberArray接口表示只要索引的类型是数字时,那么值的类型必须是数字,虽然接口也可以用来描述数组,但是通常我们不会这样做,因为这种方式比前面两种方式复杂得多。

使用上面代码中的arr2.调用push方法,会报错

arr2.push(3)
//  ERROR in 
//  TS2339: Property 'push' does not exist on type 'NumberArray'.

接口上并没有定义push方法,因此会报错

但是通常,会用类似的方法定义类数组

类数组

对于一个普通对象来说,如果它的所有的property都为正整数,同时也具有相应的length属性,虽然该对象并不是由Array构造函数创建出来的,但是它依然呈现出数组的的行为,这样的情况下,这样的对象被称为"类数组"对象

类数组对象是具有以下两点的对象

  1. 拥有length属性,其他属性(索引)为非负整数
  2. 不具有数组所拥有的方法
  function sum () {
    let args:number[] = arguments
  }
// ERROR in
//  TS2740: Type 'IArguments' is missing the following properties from type 'number[]': pop, push, concat, join, and 24 more.

上例中,arguments不是一个真正的数组,而是一个类数组,类数组不存在数组的方法,因此会报错

在JavaScript中,我们可以通过Function.length来访得到函数签名中参数的个数(形参个数),如果要知道实参个数,在非箭头函数中,我们可以通过函数内部局部变量arguments得知,它是一个类数组

用接口来表示类数组

function sum () {
    let args:{
      [index:number]:number,
      length:number,
      callee:Function
    } = arguments
  }

在这个例子中,我们除了约束了当索引类型的为数字,值的类型必须是数字之外,也约束了它还有length和callee两个属性。

事实上,常用的类数组都有自己的接口定义,如IArguments ,NodeList HTMLCollection

function sum1 () {
    let args:IArguments = arguments
  }

其中 IArguments 是 TypeScript 中定义好了的类型,它实际上就是:

interface IArguments {
    [index: number]: any;
    length: number;
    callee: Function;
}

any在数组中的应用

一个比较常见的做法是,用 any 表示数组中允许出现任意类型:

let list: any[] = ['xcatliu', 25, { website: 'http://xcatliu.com' }];
posted @ 2021-07-05 11:53  upupupupupgo  阅读(425)  评论(0编辑  收藏  举报