系统学习 TypeScript(六)——认识接口

简介: 接口是我们在进行模块、方法等的封装时经常会用到的一个概念,使用接口可以

7.png


前言


接口是我们在进行模块、方法等的封装时经常会用到的一个概念,使用接口可以:


  • 将一类具体事务抽象成单一的对象方法,使用者不必关心内部的实现逻辑,只需要按照要求传入对应的参数即可得到预期的结果输出,从很大程度上减轻了使用者的心智负担。


  • 一处定义,多处使用,减轻后续的维护负担。


TypeScript 也有接口的概念,它被用来校验数据类型是否符合要求。


15.png


TypeScript 接口就像是一份具有名称的契约或者规则,契约的内容规定了某个数据结构里面的数据组成和类型,只要有某处通过名称调用了这份契约,那就意味着此处的数据必须要接受并通过契约内容的检查,否则会报错。


JavaScript 代码示例


如果用 JavaScript,我们的代码可能是这样的:


function printInfo(info){
    console.log(info.name);
}
printInfo({name: "编程三昧"});
// 编程三昧
printInfo({age: 22});
// undefined
printInfo();
// Uncaught TypeError: Cannot read properties of undefined (reading 'name')


由于 JavaScript 没有静态类型检查机制,在代码真正运行前无法准确判断可能会出现的问题。经常在调用一个接口前,还需要研究一下这个接口相关的源码,这很不利于协同开发


我们迫切需要一种能够在方法调用时明确显示所需参数类型及格式的机制。


不使用接口的 TypeScript 代码示例


在学习 TypeScript 接口之前,我们的 TypeScript 代码可能是这样的:


let personalInfo_1: { name: string; age: number } = {
    name: "编程三昧",
    age: 22
};
let personalInfo_2: { name: string; age: number } = {
    name: "隐逸王",
    age: 22
};


虽然达到了数据类型检查的目的,但是很明显,类型检查器 { name: string; age: number } 重复,造成了代码冗余。


为什么要用 TypeScript 接口?


上面两段代码暴露出两个问题:


  • 没有类型检查器的机制不利于协同开发;
  • 常规的 TypeScript 类型检查器写法容易造成代码冗余。


使用 TypeScript 接口就可以解决上述问题。比如:


interface PersonalInfo {
    name: string;
    age: number;
}
function printPersonalInfo(info: PersonalInfo): void {
    console.log(info);
}
let personalInfo_1: PersonalInfo = {
    name: "编程三昧",
    age: 22
};
let personalInfo_2 = {
    name: "隐逸王",
    age: 22,
    gender: "Male"
}
let personalInfo_3 = {
    age: 22
}
printPersonalInfo(personalInfo_1);
// 编程三昧
printPersonalInfo(personalInfo_2);
// 隐逸王
printPersonalInfo(personalInfo_3);
// Error,具体报错信息如下图


14.png


可以看到,通过使用 TypeScript 接口,既实现了类型检查,又减少了重复指定类型检查器的冗余。


就像我们之前说的,TypeScript 接口就是一份约束数据类型的契约,谁都可以通过名称去使用它来约束自己的数据类型,这就实现了复用的效果。


存在的疑惑


在上面代码中,不知道大家有没有注意到一点比较怪异的地方:personalInfo_2 的数据类型并不符合 printPersonalInfo 方法中指定的数据类型,但是代码却没有报错。


关于这一点,不知道大家都是怎么理解的?


总结


本文主要介绍了为什么要用 TypeScript 接口的原因以及用接口的好处。接口就像是一份契约,内容规定了数据格式,任何变量都可通过接口名称使用接口进行类型检查。


并且还引出了一个疑惑点,大家可以就这个问题给出自己的见解,欢迎在评论区交流!


~ 本文完,感谢阅读!


学习有趣的知识,结识有趣的朋友,塑造有趣的灵魂!




相关文章
|
1月前
|
JavaScript 前端开发 开发工具
TypeScript的介绍,let age:number = xxx,可以直接看出数据类型,Type由微软开发,可以在任何浏览器和系统中运行,比较适合大型项目,TypeScript的安装
TypeScript的介绍,let age:number = xxx,可以直接看出数据类型,Type由微软开发,可以在任何浏览器和系统中运行,比较适合大型项目,TypeScript的安装
|
18天前
|
开发框架 前端开发 JavaScript
在基于vue-next-admin的Vue3+TypeScript前端项目中,为了使用方便全局挂载对象接口
在基于vue-next-admin的Vue3+TypeScript前端项目中,为了使用方便全局挂载对象接口
|
17天前
|
JavaScript 前端开发 API
Vue 3+TypeScript项目实战:解锁vue-next-admin中的全局挂载对象接口,让跨组件共享变得高效而优雅!
【8月更文挑战第3天】在构建Vue 3与TypeScript及vue-next-admin框架的应用时,为提高多组件间共享数据或方法的效率和可维护性,全局挂载对象接口成为关键。本文通过问答形式介绍其必要性和实现方法:首先定义全局接口及其实现,如日期格式化工具;接着在`main.ts`中通过`app.config.globalProperties`将其挂载;最后在组件内通过Composition API的`getCurrentInstance`访问。这种方式简化了跨组件通信,增强了代码复用性和维护性。
12 0
|
1月前
|
JavaScript 开发者 索引
TypeScript接口与类型别名:深入解析与应用实践
【7月更文挑战第10天】TypeScript的接口和类型别名是定义类型的关键工具。接口描述对象结构,用于类、对象和函数参数的形状约束,支持可选、只读属性及继承。类型别名则为复杂类型提供新名称,便于重用和简化。接口适合面向对象场景,类型别名在类型重用和复杂类型简化时更有优势。选择时要考虑场景和灵活性。
|
1月前
|
存储 JavaScript 开发者
【Vue3+TypeScript】CRM系统项目搭建之 — 关于 VUE3 语法新变化(四)
【Vue3+TypeScript】CRM系统项目搭建之 — 关于 VUE3 语法新变化(四)
25 0
【Vue3+TypeScript】CRM系统项目搭建之 — 关于 VUE3 语法新变化(四)
|
1月前
|
JavaScript API 网络架构
【Vue3+TypeScript】CRM系统项目搭建之 — 关于 VUE3 语法新变化(三)
【Vue3+TypeScript】CRM系统项目搭建之 — 关于 VUE3 语法新变化(三)
23 0
【Vue3+TypeScript】CRM系统项目搭建之 — 关于 VUE3 语法新变化(三)
|
1月前
|
JavaScript API
【Vue3+TypeScript】CRM系统项目搭建之 — 关于 VUE3 语法新变化(二)
【Vue3+TypeScript】CRM系统项目搭建之 — 关于 VUE3 语法新变化(二)
20 0
【Vue3+TypeScript】CRM系统项目搭建之 — 关于 VUE3 语法新变化(二)
|
1月前
|
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),阅读官方文档,参与社区讨论。持续编码和实践是关键。
19 0
|
1月前
|
JavaScript 前端开发 程序员
Typescript 【实用教程】(2024最新版)含类型声明,类型断言,函数,接口,泛型等
Typescript 【实用教程】(2024最新版)含类型声明,类型断言,函数,接口,泛型等
37 0
|
1月前
|
JavaScript Java 索引
TypeScript(四)接口
TypeScript(四)接口
25 0