学习TypeScript 之 interface 接口
2023-02-18 16:41:29 时间
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);
},
};
相关文章
- 如何在 Java 中实现 Dijkstra 最短路算法
- 如何在 Java 中实现最小生成树算法
- 如何在 Java 中实现无向环和有向环的检测
- 如何在 Java 中实现无向图
- 如何在 Java 中实现二叉搜索树
- 如何在 Java 中实现堆排序算法
- 如何在 VS Code 中为 Java 类生成序列化版本号
- Freemarker-数字默认格式化问题
- Chrome扩展插件的开发--获取网页Cookies
- 【以解决】项目使用feign时候提示bean不能注入feign
- Docker设置容器开机自启
- 常用的淘汰算法
- 分布式事务seata,TCC,最大努力通知,最终一致性解决方案——总结三!
- java分布式事务——最终一致性,最大努力通知总结!
- java分布式事务——seata,tcc解决方案总结!
- 分布式系统–拜占庭将军问题(The Byzantine Generals Problem)
- idea中启动SSM项目
- 【编程】给定一个部门,变量出当前部门的所有父部门包含当前部门
- 【解疑】ConcurrentHashMap 在JDK1.7时候put或get时候,怎么定位到数据的?
- Spring的BeanFactoryPostProcessor