学习TypeScript 之 interface 接口

Dear，大家好，我是“前端小鑫同学”，长期从事前端开发，安卓开发，热衷技术，在编程路上越走越远～

---

接口（interface ）在其他的编程语言中的概念如出一辙，都是在制定使用时的标准和规范。接下来我们一起看一下在接口中定义必要属性，可选属性，任意属性，函数，接口实现和接口继承的具体代码实现。

一、类型注解：

1. 必要属性：

如下代码例子说明​​Person​​​接口包括一个必要的姓名和性别属性，使用​​interface​​​进行标记即可，在定义​​jones​​的时候就需要把全部属性定义出来，反之则触发ts检测并提示要进行修复。

interface Person {
  name: string;
  gender: boolean;
}

const jones: Person = {
  name: "jones",
  gender: false,
};

2. 可选属性：

如下代码例子说明​​Person​​​接口包括一个可选的​​age​​​属性，当然年龄是属于不能随便问的问题，所以在定义​​jones​​​的时候就没有传递​​age​​​，你要是愿意说就需要传入​​number​​类型的值。

interface Person {
  name: string;
  gender: boolean;
  age?: number;
}

const jones: Person = {
  name: "jones",
  gender: false,
};

3. 任意属性：

当然要有一些属性是没办法全部都能想得出来的，如果不在接口中定义就随便往​​jones​​​里塞的话代码是没法通过​​ts​​​检测的，这样我们就需要使用​​[propname: string]: any;​​来定义一个宽泛的属性。

interface Person {
  name: string;
  gender: boolean;
  age?: number;
  [propname: string]: any;
}

const jones: Person = {
  name: "jones",
  gender: false,
  added: [],
};

二、其他内容

规范方法（函数）：

在定义接口的时候相对于​​类型别名​​​来说更加高级，在接口定义中直接定义函数，并在定义​​jones​​的时候进行实现。

interface Person {
  name: string;
  gender: boolean;
  age?: number;
  [propname: string]: any;
  running(type: string): void;
}

const jones: Person = {
  name: "jones",
  gender: false,
  added: [],
  running: (type) => {
    console.log(type);
  },
};

接口被实现：

接口定义完成后还可以通过​​implements​​​关键字被定义的​​class​​​来进行实现，接口中的属性和函数都需要在​​class​​​中进行实现，让然​​ts​​可以检测到我们未实现的时候进行提示修复。

interface Person {
  name: string;
  gender: boolean;
  age?: number;
  [propname: string]: any;
  running(type: string): void;
}

class Student implements Person {
  [propname: string]: any;
  name!: string;
  gender!: boolean;
  age?: number | undefined;
  running(type: string): void {
    console.log(type);
  }
}

const jones: Student = {
  name: "jones",
  gender: false,
  added: [],
  running: (type) => {
    console.log(type);
  },
};

接口继承接口：

当我们在使用一些其他的库或者基础代码且不太满足现有功能的时候我们往往要遵循不直接修改而需扩展后使用的原则，这样我们就可以使用​​extends​​关键字来继承基础代码中的接口。

interface Person {
  name: string;
  gender: boolean;
  age?: number;
  [propname: string]: any;
  running(type: string): void;
}

interface Teacher extends Person {
  course: string;
}

const garcia: Teacher = {
  name: "Garcia",
  gender: false,
  course: "语文",
  running: (type) => {
    console.log(type);
  },
};