当前位置: 首页 > Web前端 > HTML

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

时间:2023-03-29 11:26:06 HTML

系统学习TypeScript(六)——认识接口用户无需关心内部实现逻辑,只需要按需传入相应的参数即可得到预期的输出,大大减轻了用户的心理负担.一种定义,多种用途,减轻后续维护负担。TypeScript也有接口的概念,用来验证数据类型是否符合要求。TypeScript接口就像一个带有名称的合同或规则。契约的内容规定了数据结构中数据的组成和类型。只要在某处调用了这个合约的名字,就意味着这里的数据你必须接受并通过合约内容的检查,否则会报错。JavaScript代码示例如果我们使用JavaScript,我们的代码可能看起来像这样:age:22});//undefinedprintInfo();//UncaughtTypeError:Cannotreadpropertiesofundefined(reading'name')由于JavaScript没有静态类型检查机制,无法在代码前准确判断可能存在的问题实际上运行。往往在调用一个接口之前,需要研究这个接口相关的源码,不利于协同开发。我们迫切需要一种机制,能够在调用方法时清晰地显示所需的参数类型和格式。没有接口的TypeScript代码示例在学习TypeScript接口之前,我们的TypeScript代码可能看起来像这样:letpersonalInfo_1:{name:string;age:number}={name:"Programming",age:22};letpersonalInfo_2:{name:string;age:number}={name:"隐士王",age:22};虽然达到了数据类型检查的目的,但是很明显类型检查器{name:string;age:number}重复,造成代码冗余。为什么使用TypeScript接口?上面两段代码暴露了两个问题:没有类型检查器的机制不利于协同开发;常规的TypeScript类型检查器编写方式容易造成代码冗余。使用TypeScript接口可以解决以上问题。例如:interfacePersonalInfo{name:string;age:number;}functionprintPersonalInfo(info:PersonalInfo):void{console.log(info);}letpersonalInfo_1:PersonalInfo={name:"ProgrammingSamadhi",age:22};letpersonalInfo_2={name:"HermitKing",age:22,gender:"Male"}letpersonalInfo_3={age:22}printPersonalInfo(personalInfo_1);//ProgrammingSamadhiprintPersonalInfo(personalInfo_2);//HermitKingprintPersonalInfo(personalInfo_3));//报错,具体报错信息见下图,通过使用TypeScript接口,不仅实现了类型检查,还减少了重复指定类型检查器的冗余。正如我们之前所说,TypeScript接口是一种约束数据类型的契约。任何人都可以使用它通过名字来约束自己的数据类型,达到了复用的效果。存在的疑惑在上面的代码中,不知道大家有没有发现一个奇怪的地方:personalInfo_2的数据类型不符合printPersonalInfo方法中指定的数据类型,但是代码并没有报错。关于这一点,不知道大家是怎么理解的呢?总结本文主要介绍使用TypeScript接口的原因以及使用接口的好处。接口就像一个契约,内容规定了数据格式,任何变量都可以使用接口,通过接口名进行类型检查。这也导致了一个疑问点。你可以就这个问题发表自己的看法。欢迎在评论区交流!~~本文到此结束,感谢阅读!~学习有趣的知识,认识有趣的朋友,塑造有趣的灵魂!大家好,我是〖编程三昧〗的作者王隐,我的公众号是《编程三昧》,欢迎关注,希望大家多多指教!