TypeScript学习笔记-4 接口

前言

出于学习提升、成果展示、记录心得等目的，我选择将自己的一点学习笔记放置出来，希望能够帮助到有需要的人，同时，由于个人知识的片面，文章中可能会出现不正确的地方，希望发现者可以及时指出，以便及时修正，不误导后来人。接下来就开始文章正文吧。

接口

TypeScript的核心原则之一是对值所具有的结构进行类型检查。 它有时被称做“鸭式辨型法”或“结构性子类型化”。 在TypeScript里，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。 接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法都应该是抽象的，需要由具体的类去实现，然后第三方就可以通过这组抽象方法调用，让具体的类执行具体的方法。简而言之，就是编写一套标准来规范对应的数据，这种方法可以有效的减少程序编写中的BUG的出现。例如：

interface  ValueIn {
    value:number
}
function f(value:ValueIn) {
    console.log(value.value);
}
let list={value:123};
f(list);

接口的关键字是interface，图中ValueIn是接口名，内容中的value:number则是对内容的规范，当被声明为ValueIn接口类型的变量list的内容不符合接口定义时，则会报错，如图所示：

可选属性

一些情况下，我们不一定会用到接口定义的所有属性，为了解决这个问题，我们引入了可选属性，定义方式为在属性名后添加一个?（如下图的timesnap?:number）。顾名思义，可选属性及可以选择是否使用的属性，倘若命名符合接口内的定义，则会按照接口内对应的定义进行检测；如果没有对应的属性，则不进行检测，如图所示：

interface  ValueIn {
    value:number,
    timesnap?:number
}
function f(value:ValueIn) {
    console.log(value);
}
let list={value:123};
f(list);

只读属性

有时，我们需要保持一些属性的值不受改变，这时我们可以考虑使用接口的只读属性定义，定义的方式为在属性名前添加readonly关键字，此时的只读属性在定义后便无法进行修改，如：

与之效果类似的有之前说到变量时提及的const常量，两者作用相同，为了方便理解，可以这样简便地进行记忆：当对象是变量时，使用const，当对象是属性时，使用readonly。

额外属性检查

有些时候，我们希望传入的属性比接口定义的属性要多，也就是说会有接口未定义过的属性，为了功能设计或者调试的需要，我们可以尝试绕过typescript的类型检测，而目前适合使用的方法为索引签名，即在接口中添加这样一条属性：[XX:string]:any，这个意思是为改接口添加一条或多条属性名为string类型，值不限类型的属性对，这样自然可以解决额外属性检查的问题。不过由于这些额外正是BUG的主要来源，所以不推荐通过这些方法绕过typescript的属性检查。下图是通过索引签名绕过额外属性检查的一个使用示例：

interface  ValueIn {
    value:number,
    [xx:string]:any
}
function f(value:ValueIn) {
    console.log(value);
}
let list={value:123,timesnap:20200412,user:'张三'};
f(list);

函数类型

顾名思义，这种接口类型是用来规范函数的传入值和返回值的，例如：

interface  UserAction {
    (value:number,timesnap:number,user:string):boolean
}
let f:UserAction
f=function(value,timesnap,user) {
    console.log(value,timesnap,user);
    return timesnap>20200408
}
f(123,20200412,'张三');

这里的函数被声明为UserAction接口类型，传入的参数和返回值也需要是接口定义的类型，某种意义上来说，上图和下图的含义相同：（即只在函数内进行类型声明）

function f(value:number,timesnap:number,user:string):boolean {
    console.log(value,timesnap,user);
    return timesnap>20200408
}
f(123,20200412,'张三');

索引类型

索引类型是表示可以通过索引来调用对应数据的一种接口形式，索引类型一般具有索引签名，即对索引的描述和对索引返回值的描述，例如之前说到额外属性检查中提及的[xx:string]:any，这里是说明了索引的类型是字符串，索引的返回值是任意类型，以下是索引类型的一个简单示例：
此处StudentNumber接口规定了变量是数字索引类型，同时返回值应该是字符串，同时我们可以使用数字来对变量进行索引。

另外值得注意的是，TypeScript支持两种索引签名，分别是number和string，可以同时使用两种类型的索引，但是数字索引的返回值必须是字符串索引返回值类型的子类型。 这是因为当使用 number来索引时，JavaScript会将它转换成string然后再去索引对象。 也就是说用 20200412（一个number）去索引等同于使用"20200412"（一个string）去索引，因此两者需要保持一致。