学习TypeScript 之 interface 接口

简介: 学习TypeScript 之 interface 接口

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


相关文章
|
11小时前
|
JavaScript
​​​​Typescript 接口 和继承 数组处理
ts的基础数据类型,可用来处理一般数据,但是碰到后台传入的复杂对象数组的时候,我们可以使用ts中的接口来定义处理
32 0
|
11小时前
|
JavaScript 前端开发 C++
Typescript.中文.接口声明.lib.es5.d.ts
Typescript.中文.接口声明.lib.es5.d.ts
23 0
|
11小时前
|
JavaScript 前端开发 编译器
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)
69 0
|
11小时前
|
编解码 JavaScript 前端开发
TypeScript【第三方声明文件、自定义声明文件、tsconfig.json文件简介、tsconfig.json 文件结构与配置】(六)-全面详解(学习总结---从入门到深化)
TypeScript【第三方声明文件、自定义声明文件、tsconfig.json文件简介、tsconfig.json 文件结构与配置】(六)-全面详解(学习总结---从入门到深化)
73 0
|
11小时前
|
JavaScript 前端开发 开发者
【Web 前端】TypeScript 中的接口是什么?
【5月更文挑战第1天】【Web 前端】TypeScript 中的接口是什么?
|
11小时前
|
JavaScript 前端开发 开发者
【TypeScript技术专栏】TypeScript类型系统与接口详解
【4月更文挑战第30天】TypeScript扩展JavaScript,引入静态类型检查以减少错误。其类型系统包括基本类型、数组等,而接口是定义对象结构的机制。接口描述对象外形,不涉及实现,可用于规定对象属性和方法。通过声明、实现接口,以及利用可选、只读属性,接口继承和合并,TypeScript增强了代码的健壮性和维护性。学习和掌握TypeScript的接口对于大型项目开发至关重要。
|
11小时前
|
JavaScript 前端开发 索引
【HarmonyOS 4.0 应用开发实战】TypeScript入门之接口详讲
【HarmonyOS 4.0 应用开发实战】TypeScript入门之接口详讲
44 0
|
11小时前
|
存储 缓存 JavaScript
【lib.es5】ArrayBuffer、DataView 的TypeScript接口
【lib.es5】ArrayBuffer、DataView 的TypeScript接口
134 0
|
11小时前
|
JavaScript 前端开发 索引
[ Typescript 手册] JavaScript `Array` 在 Typescript 中的接口
[ Typescript 手册] JavaScript `Array` 在 Typescript 中的接口
22 0
|
11小时前
|
JavaScript 前端开发
[ Typescript 手册] JavaScript `Date` 在 Typescript 中的接口
[ Typescript 手册] JavaScript `Date` 在 Typescript 中的接口
42 1