当前位置: 首页 > 科技观察

typescript中的类和接口

时间:2023-03-12 20:20:52 科技观察

typescript真的很容易忘记。暂时不用会觉得很陌生,但回过头来看,又是一种熟悉的感觉。有句话叫ts越用越香。确实可以规范我们写作的格式,语法检查和类型检查等,之前写过一个react+ts的demo,时间长了忘记了。现在趁热复习一下ts的内容和一些高级语法。下面我们来回顾一下ts中常用的类和接口。喜欢的话可以点赞、评论、关注公众号,让更多人看到。有什么问题也可以评论留言。我们可以互相学习,共同进步。在类首页有一点我们需要明确的是typescript中的class和javascript中的ES6语法类的区别,不要搞混了。ts相比js,增加了声明属性的类型,参数的类型,返回结果的类型。这个地方一看就写错了,不声明ts会报错。classPerson{name:string;constructor(name:string){this.name=name;}getName():void{console.log(this.name);}}classPerson{constructor(name){this.name=name;}getName(){console.log(this.name);}}ES5编辑结果varPerson=/**@class*/(function(){functionPerson(name){this.name=name;}Person.prototype.getName=function(){console.log(this.name);};returnPerson;}());类的get和setts在编译get和set时默认使用es3编译,vscode编辑器会报错TS1056:AccessorsareonlyavailablewhentargetingECMAScript5andhigher需要编译到ES5或以上版本,解决方法:$tscxxx.ts-tes5。classUser{myname:string;constructor(myname:string){this.myname=myname}getname(){returnthis.myname}setname(newName:string){this.myname=newName}}ES5编译结果varUser=/**@class*/(function(){functionUser(myname){this.myname=myname;}Object.defineProperty(User.prototype,"name",{get:function(){returnthis.myname;},set:function(newName){this.myname=newName;},enumerable:false,configurable:true});returnUser;}());这里有几个问题需要思考,答案在文末:varu=newUser("a");console.log(u);console.log(u.myname);u.myname='b';console.log(u.myname);console.log(u.hasOwnProperty("name"));console.log(Object.getPrototypeOf(u));console.log(Object.getPrototypeOf(u).hasOwnProperty("name"));Abstractclassabstract关键字表示一个抽象类,不能实例化,即new,只能继承,抽象类一般用于封装提供给子类的一些公共方法和属性。abstractclassAnimal{publicreadonlyname:string;protectedage:number=38;privatemoney:number=10;constructor(name:string){this.name=name}}classDogeextendsAnimal{staticclassName='Dog'staticgetClassName(){console.log(this.className)}getName(){console.log(this.name)}getAge(){console.log(this.age)}}leta=newAnimal("ss");打印这里看继承结果:console.log(a);//Dog{age:38,money:10,name:'ss'}这里顺便在里面访问访问修饰符publicprotectedprivatepublic而在外面,包括你自己和你的孩子班级和其他班级都可以得到保护。它们可以被自己及其子类访问,但不能被其他地方访问。privateprivate(只能自己访问,其他子类不能访问)interface表示对象的属性interfaceRectangle{width:number;height:number}letr:Rectangle={width:100,height:10}interfaceSpeakable{speak():void;name?:string}letspeaker:Speakable={//name:"bdt",speak(){}}接口用于描述抽象interfaceAnimalLink{eat():void;move():void}接口的行为可以通过接口约束变量类型interfacePerson3{readonlyid:number;name:string;[PropName:string]:any}letp1:Person3={id:1,name:"sss"}受接口(规范)函数interfaceDiscountInterface{(price:number):number}letdiscount:DiscountInterface=function(price:number)约束:number{returnprice*.8}通过index约束数组和对象interfaceUserInterface{[index:number]:string}letarr:UserInterface=['aa','bb']interfaceUserInterface2{[index:string]:string}letobj:UserInterface2={name:"sss"}通过接口classAnimal3{约束构造函数constructor(publicname:string){}}interfaceWithClassName{new(name:string):Animal3}functioncreateClass(clazz:WithClassName,name:string){returnnewclazz(name)}leta3=createClass(Animal3,"别抖腿");安慰。log(a3)类和接口的区别类声明并实现方法接口接口声明,但不能实现方法abstractclassAnimal{name:string="111";abstractspeak():void;//抽象类和方法做不包含具体的实现必须在子类中实现}//接口中的方法是抽象的)//重写:子类重写从父类继承的方法}}classCattextendsAnimalimplementsFlying,Eating{speak(){//继承抽象类的方法必须实现console.log("喵喵")}fly(){console.log("Iamafoodie")}eat(){console.log("Iamafoodie")}}写在最后的文本中作为答案User{myname:'a'}abfalseUser{名称:[Getter/Setter]}true