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


相关文章
|
2月前
|
JavaScript
typeScript基础(5)_对象的类型-interfaces接口
本文介绍了TypeScript中接口(interfaces)的基本概念和用法,包括如何定义接口、接口的简单使用、自定义属性、以及如何使用`readonly`关键字定义只读属性。接口在TypeScript中是定义对象形状的重要方式,可以规定对象的必有属性、可选属性、自定义属性和只读属性。
40 1
|
28天前
|
JavaScript 前端开发 Java
TypeScript【接口】超简洁教程!再也不用看臭又长的TypeScript文档了!
【10月更文挑战第10天】TypeScript【接口】超简洁教程!再也不用看臭又长的TypeScript文档了!
|
2月前
|
数据采集 JavaScript 前端开发
使用 TypeScript 接口优化数据结构
使用 TypeScript 接口优化数据结构
|
2月前
|
JavaScript
typeScript基础(1)_原始数据类型学习
本文介绍了TypeScript中的原始数据类型,包括布尔型、数值型、字符串型、`void`、`null`和`undefined`,并展示了如何在TypeScript中声明和使用这些类型。同时,还介绍了如何通过`tsc`命令编译TypeScript文件。
48 4
|
1月前
|
JavaScript 索引
TypeScript(TS)安装指南与基础教程学习全攻略(二)
TypeScript(TS)安装指南与基础教程学习全攻略(二)
51 0
|
1月前
|
JavaScript 前端开发 安全
TypeScript(TS)安装指南与基础教程学习全攻略(一)
TypeScript(TS)安装指南与基础教程学习全攻略(一)
28 0
|
3月前
|
开发框架 前端开发 JavaScript
在基于vue-next-admin的Vue3+TypeScript前端项目中,为了使用方便全局挂载对象接口
在基于vue-next-admin的Vue3+TypeScript前端项目中,为了使用方便全局挂载对象接口
|
3月前
|
JavaScript 前端开发 API
Vue 3+TypeScript项目实战:解锁vue-next-admin中的全局挂载对象接口,让跨组件共享变得高效而优雅!
【8月更文挑战第3天】在构建Vue 3与TypeScript及vue-next-admin框架的应用时,为提高多组件间共享数据或方法的效率和可维护性,全局挂载对象接口成为关键。本文通过问答形式介绍其必要性和实现方法:首先定义全局接口及其实现,如日期格式化工具;接着在`main.ts`中通过`app.config.globalProperties`将其挂载;最后在组件内通过Composition API的`getCurrentInstance`访问。这种方式简化了跨组件通信,增强了代码复用性和维护性。
57 0
|
4月前
|
JavaScript 前端开发 安全
如何学习typescript?
【7月更文挑战第9天】1. 了解其为JavaScript超集,增加类型系统和ES6特性,提升代码安全性和效率。 2. 安装 TypeScript 全局 (`npm install -g typescript`),用`tsc -v`验证,或尝试在线的TypeScript Playground。 3. 学习类型注解、基础类型(如number、string、boolean等)、any与unknown,接口和类。 4. 探索高级特性,如泛型、模块&命名空间、装饰器。 5. 实践中巩固知识,如做小项目(如用React或Vue),阅读官方文档,参与社区讨论。持续编码和实践是关键。
34 0
|
1月前
|
JavaScript 前端开发 安全
深入理解TypeScript:增强JavaScript的类型安全性
【10月更文挑战第8天】深入理解TypeScript:增强JavaScript的类型安全性
45 0