这是我参与更文挑战的第8天，活动详情查看：更文挑战

一、接口与联合类型

1. 联合类型定义

联合类型表示取值可以为多种类型中的一种, 可以通过管道(|)将变量设置多种类型, 赋值时可以根据设置的类型来赋值

let money:string | number = 123 
money = '456'
console.log(money);

运行结果

2. 接口的定义

接口可以理解为一种类型, 一个规范, 一个约束, 可以对数组、对象、类型进行约束，接口中可定义可选属性、只读属性、任意属性，这样在开发代码时便于调试例如：

interface UserSchema{
    name:string,
    age:number
}

let user1:UserSchema = {name:'张三',age:1}

如果属性少了，或者数据类型不正确，编辑器都会提示报错

存疑属性

interface UserSchema2{
    name:string,
    age:number,
    sex?:string // 表示存疑, 该属性可选
}

let user2:UserSchema2 = {name:'王五',age:18}
console.log(user2);

只读属性

  readonly name:string, // 只读属性

在接口中也能使用联合类型

 age:number|string, // 接口中使用联合类型

[propName:string]: any // 表示动态添加属性

interface UserSchema2{
   readonly name:string, // 只读属性
    age:number|string, // 接口中使用联合类型
    sex?:string // 表示存疑, 该属性可选
    [propName:string]: any // 表示动态添加属性
}

let user2:UserSchema2 = {name:'王五',age:18,weight:180}

console.log(user2);

定义数组约束

interface IArray{
    [index:number]:number | string
 }
 
 let arr1:IArray = [1,2,'3']
 console.log(arr1);

二、数组与元组

1. 定义

数组对象是使用单独的变量名来储存一系列的值，最常见的定义方式有两种，第一种是类型 + 方括号定义，第二种是数组泛型来定义

2. 测试

数组型 + [] 的形式

// 定义数组类型  类型 + [] 的形式
let arr2:(number|string ) [] =[1,2,3,'234']
console.log(arr2);

Array + 泛型的形式

// 2. Array泛型的形式
let arrType1:Array<string> =['1','234']
let arrType2:Array<number> =[1,2,3,4]
let arrType3:Array<any> =[{name:'zs',age:'18'}]
console.log(arrType1,'==>arrType1');
console.log(arrType2,'==>arrType2');
console.log(arrType3,'==>arrType3');

3.元祖

// 就是数组, 不过把数组中的每个元素的类型都约定好了
let originArr: [number,string,boolean] = [1,'2',true]
console.log(originArr,'===>originArr');

使劲卷--TypeScript接口与联合类型、数组与元组