TypeScript教程(二)接口与联合类型

联合类型

联合类型表示取值可以为多种类型中的一种，可以通过管道(|)将变量设置多种类型，赋值时可以根据设置的类型来赋值。
接下来看一下代码示例：

//联合类型 使用|支持多个类型
let muchtype:string|number="hello";
muchtype=1;
muchtype=true//报错

注意上面代码加粗的地方，muchtype变量定义了string或number类型，那么赋值可以是string或number类型，如果是其它类型会报错。

接口

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

interface Istate{
    name:string;
    age:number;  
}
let user:Istate={name:"张三",age:10}

注意上面代码加粗的地方，使用interface关键词定义接口，Istate为接口的名称，接口名称的规范一般首字母大写，最好起名为“I”这样从名字上看就知道是接口，而不是类，因为类的名称首字母一般也为大写。接口中定义了name为string类型，age为number类型，在变量user中使用接口，那么在user变量中赋值对象的属性的个数，属性值的类型必须与接口一致，否则报错。
接口也支持可选属性，代码示例如下：

interface Istate2{
    name:string;
    age?:number;//加上问号表示存疑，可有可无
}
let user2:Istate2;
user2={name:"张三",age:20};
user2={name:"李四"}

注意上面代码加粗的地方，接口Istate2的属性age使用问号+冒号的方式定义类型，表示存疑，可有可无，在变量user2中使用接口，age属性可以有也可以没有。

接口也支持只读属性，代码示例如下：

interface Istate2{
    readonly name:string; //readonly只读，name不能更改
}
let user2:Istate2;
user2={name:"李四"}
user2.name="王五";//不能更改，否则报错

注意上面代码加粗的地方，使用readonly定义属性，该属性一旦赋值后就不能再更改，否则报错。

接口的属性也支持联合类型，代码示例如下：

interface Istate3{
          name:string|number;//可以是联合类型
}
let user3:Istate3={name:"张三"}
user3={name:18}

接口中的name支持string和number类型，在user3变量中可以赋值string或number类型。

如果对象属性个数不确定的情况下，可以这样定义，代码示例如下：

interface Istate3{
    name:string|number;//可以是联合类型
    age:number;
    [propName:string]:any; //动态添加属性 propName自定义
}
let user3:Istate3={name:"张三",age:10,gender:"男",money:2000000}

注意代码加粗的地方Istate3接口内部，name和age为必填类型，[propName:string]:any为动态添加属性，propName是自定义的名称，在变量user3赋值时name和age属性必须按照接口的约束类型赋值，而age属性后面的属性，是动态添加的属性，即gender和money属性为动态属性。

接口也可以约束数组，代码示例如下：

interface IArray{
    [index:number]:number;
}
let array:IArray=[1,2,3,1]

注意上面代码加粗的地方格式和动态添加属性很像，[index:number]:number中的index为自定义的名称类型必须是number，因为数组的索引就是number类型，冒号后面的number代表数组里面的值必须是number类型即数字，如果定义string类型[index:number]:string那么数组里面的值必须是string类型即字符串。