TypeScript中的数组和元组

798 阅读2分钟

这是我参与11月更文挑战的第15天,活动详情查看:2021最后一次更文挑战 

数组(Array)

TypeScript像JavaScript一样可以操作数组元素。 有两种方式可以定义数组。

第一种,可以在元素类型后面接上[],表示由此类型元素组成的一个数组:

let arrOfNumbers: number[] = [1,2,3]

这个时候如果我们的数组中有其他类型的值会报错比如:

let arrOfNumbers: number[] = [1,2,3,'name']

报错信息:

如果我们要使用数组中的Push方法,如果我们增加的是数字类型那么会正常运行,如果我们增加别的类型的值那么页会报错。

正确示例:

let arrOfNumbers: number[] = [1,2,3]
arrOfNumbers.push(3)

错误示例:

let arrOfNumbers: number[] = [1,2,3]
arrOfNumbers.push('123')

报错信息:

第二种方式是使用数组泛型,Array<元素类型>

let list: Array<number> = [1, 2, 3];

类数组(Array like Object

  1. 可以利用属性名模拟数组的特性
  2. 可以动态的增长length属性
  3. 如果强行让类数组调用push方法,则会根据length属性值得位置进行属性的扩充。
function test(){
    console.log(arguments)
    arguments.length
    arguments[0]
}

在TypeScript中类型:

如果我们调用没有的方法比如forEach会报错

function test(){
    console.log(arguments)
    arguments.length
    arguments[0]
    arguments.forEach();
}

报错信息:

如果我们将数组增加到类数组中也会报错

function test(){
    console.log(arguments)
    arguments.length
    arguments[0]
    let arr: any[] = arguments
}

报错信息:

其实在TypeScript已经定义好了很多类型比如:

  • HTMLAllCollection
  • IArguments
  • NodeList

等等

元组(Tuple)

元组类型允许表示一个已知元素数量和类型的数组,各元素的类型不必相同。 比如,你可以定义一对值分别为stringnumber类型的元组。

let user: [string,Number] = ['xiaochen',20]

在这里如果我们的类型或者数量不能一一对应那么也会报错:

let user: [string,Number] = [20,'xiaochen']

报错信息:

let user: [string,Number] = ['xiaochen',20,true]

报错信息:

如果我们想增加一些属性值可以使用数组中的一些方法比如push

let user: [string,Number] = ['xiaochen',20]
user.push('123')

注意:在这个例子中我们只能添加字符串或者数字类型,如果添加别的类型会报错

let user: [string,Number] = ['xiaochen',20]
user.push(true)

报错信息: