学习TypeScript 之 interface 接口

前端小鑫同学

发布于 2022-12-26 09:24:40

2650

发布于 2022-12-26 09:24:40

文章被收录于专栏：小鑫同学编程历险记

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);
  },
};

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-11-11，如有侵权请联系 cloudcommunity@tencent.com 删除

面向对象编程

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

面向对象编程

登录后参与评论

0 条评论

热度