数组和元组

TypeScript里如何对数组和元组进行类型注解

• TypeScript 里的数组，实际上和JS里的数组完全是一样的。

• 如下图：TS会根据数组和数组里元素的类型，对arr进行类型推断，推断arr为数字构成的数组。

  
  image.png
• 也可以手动去给arr设置类型注解

const arr:number[] = [1, 2, 3];

• 当然 arr这个数组里的元素，除了number类型，可能会包含其他类型的元素，比如字符串。那这个时候，类型注解该怎么写呢？

const arr:(number|string)[] = [1, 2, "3"];

• 字符串数组

const stringArr: string[] = ["a", "b"];

• undefined数组

const undefinedArr: undefined[] = [undefined,undefined]

• 对象数组

// 规定objectArr数组存储的必须是对象，而且对象的属性必须是那么和age,同时规定了name和age的类型。
const objectArr: {name:string,age:number}[] = [{name:'yang',age:20}]

类型别名 type alias

• 上边对象数组的类型注解看起来不太容易看懂，通过类型别名来定义一个类型的名字。

type User = { name: string; age: number };

// objectArr 数组里存储的每一项类型必须是 User类型
const objectArr: User[] = [{name:'yang',age:20}]

class类型

class Teacher {
  name: string;
  age: number;
}

// 虽然objectArr被类型注解了是一个Teacher类的数组
// 当数组里是给的一个对象，对象数据结构和class保持一致的时候，TS也认为是符合class类的，并不一定非要通过new Teacher去生成每一个数组元素。
const objectArr: Teacher[] = [
  new Teacher(),
  { name: 'yang', age: 20 }
]

元组 tuple

// 正常情况下，teacherInfo根据后边的值就可以类型推断为(number | string)[]
// 但是这样的类型推断，不能保证数组里具体位置的元素是什么类型
const teacherInfo:(number | string)[] = ['yang', 'male', 18];

• 一个数组，它的长度是固定的，数组里每个元素的类型是固定的，这个时候，我们可以把他变成元组进行管理，可以更准确的约束数组中每项类型。

// teacherInfo 的类型注解为元组，规定了元组元素第一个，第二个为字符串，第三个元素为数字
const teacherInfo:[string, string, number] = ['yang', 'male', 18];

• 元素应用场景是用来处理CSV,excel导出的文件，产生的数据结构，在转换成JS的时候，用元组管理会很方便

const teacherList:[string,string,number][] = [
  ['yang', 'male', 18],
  ['wang', 'female', 20],
  ['huang', 'female', 22]
]