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

不要忽视函数和类在TypeScript中的重要性

时间:2023-03-28 19:07:30 HTML

上一篇总结了TypeScript的类型注解。这篇文章会讲到同样重要的函数和类函数。下面声明了一个函数类型,通过typeType别名定义,void表示没有返回值typefnType=()=>void;作为参数函数可以作为参数,传递给另一个函数类型fnType=()=>void;functionfoo(fn:fnType){fn();}functionbar(){console.log("bar");}foo(bar);//bar和js代码的区别是传入的参数在定义函数的时候需要定义类型注解。参照指定的类型注解,如果返回值可以自己推导出来,也可以不写,比如加减函数,但是一定要写成参数,比如入参fnfunctionadd(num1:number,num2inthecalcfunction:number):number{returnnum1+num2;}functionminus(num1:number,num2:number):number{returnnum1-num2;}functioncalc(num1:number,num2:number,fn:(num1:number,num2:number)=>void){console.log(fn(num1,num2));}calc(30,20,add);//50calc(30,20,负);//10函数参数类型ts中间的函数会指定参数的类型和个数。当数量不确定时,可以使用可选类型、剩余参数和默认值。可选类型相当于定义类型和未定义的联合类型,所以有三个参数。option,传入这个类型,传入none,或者undefinedfunctionfoo(x:number,y?:number){console.log(x,y);}foo(1,2);//12foo(3);//3undefinedfoo(4,u未定义);//4undefinedparameterdefaultvalue参数设置默认值使其成为可选类型,但是有默认值的参数最好放在必填参数之后functionbaz(x:number=20,y:number){console.log(x,y);}baz(10,20);//1020baz(未定义,20);//2020remainingparameters剩余参数要放在需要的参数后面functionsum(num:number,...args:number[]){console.log(num,args);}sum(10);//10[]总和(10,20);//10[20]总和(10,20,30);//10[20,30]this的默认推导定义在对象的方法中,ts可以自动推导,但是独立函数中的this不能推导,必须在独立函数中定义该类型的类型ThisType={名称:字符串};consteating=function(this:ThisType){console.log(this.name+"eating~");};constperson={name:"kiki",eating,};person.eating()函数重载函数重载是指定义了多个函数名相同但参数个数或参数类型不同的处理方法。例如,需要连接字符串或求和数字。虽然我们知道+号可以用在字符串和数字上,但是在类型检测严格的ts代码中,这样写编译是不会通过的,需要使用[typereduction],缩小对类型的判断,然后进行处理。通过联合类型,参数组合的可能性越多,越需要if语句判断,函数的返回值类型也是未知的。这种情况下可以使用【函数重载】在ts中定义函数名称和重载函数的参数类型,然后通过实现函数来定义具体的实现。它会根据数据类型在重载函数中被调用,然后执行实现该函数的代码。functionadd(x:number,y:number):number;functionadd(x:string,y:string):string;functionadd(x:any,y:any){returnx+y;}console.log(添加(1,2));console.log(添加("a","b"));如果传递的参数与重载函数中定义的参数不同,将无法编译。类初始化类中定义的变量需要初始化,可以在定义类时赋值,也可以通过构造函数进行操作classPerson{name:string;年龄:数字;constructor(name:string,age:number){this.name=name;这个。年龄=年龄;}}constperson=newPerson("alice",20);ts和js中的继承是一样的,都是通过extends实现继承,在使用parent参数和方法时使用super关键字。类人{名称:字符串;年龄:数字;constructor(name:string,age:number){this.name=name;这个。年龄=年龄;}}classStudentextendsPerson{sno:number;构造函数(名称:字符串,年龄:数字,sno:数字){超级(名称,年龄);这个.sno=sno;}}conststudent=newStudent("alice",20,1);多态性使用多态性可以写出更通用的代码,如果要实现多态性,首先要有继承性,父类引用指向子类对象。classAnimal{action(){console.log("动物动作");}}classDogextendsAnimal{action(){console.log("dogrunning");}}classFishextendsAnimal{action(){console.log("fishswimming");}}functiondoAction(animals:Animal[]){animals.forEach((animal)=>{animal.action();});}doAction([newDog()]);doAction([newDog(),newFish()]);doAction([newDog(),newFish(),newAnimal()]);这里相当于constanimal1:Animal=newDog(),看样子是Animal对象,其实是Dog对象。这里的父类引用指向了子类对象,所以最终执行了Dog对象的方法成员修饰符。成员修饰符有以下三种public表示,随处可见,当没有定义成员修饰符时,默认为publicprivateprivate,只有类可以访问protectedprotected,也就是说类本身和子类都可以访问publicclassPerson{公共用户名:字符串=“爱丽丝”;getName(){返回这个.用户名;}}constperson=newPerson();console.log(person.username);privateprivate修饰的变量在实例对象上也是不可访问的。protectedprotected修饰的变量在实例对象上也是不可访问的。readonlyreadonly表示该属性是只读的,初始化后不能以任何方式修改,无论是在类内部还是修改实例对象,但是当它是对象时,只要不改变它的内存地址,可以修改对象的属性。Accessor访问器提供了私有属性的get/set方法,允许我们在类之外获取/修改私有属性classPerson{private_name:string;constructor(newName:string){this._name=newName;}getname(){返回this._name;}setname(newName){if(newName)this._name=newName;}}constperson=newPerson("alice");console.log(person.name);person.name="kiki";console.log(person.name);person.name="";console.log(person.name);通过get/set属性修改私有属性,可以实现拦截/判断静态成员static成员通过static关键字来定义,static定义的属性定义在类本身,只能被自身访问,并且不能在类和实例对象内部访问。当一个抽象类定义了很多公共的调用接口时,我们通常让调用者传入父类,通过多态实现更灵活的调用方式。但是父类本身可能不需要实现具体的方法,所以可以将父类中定义的方法定义为抽象方法。抽象类Shape{abstractgetArea():void;}classCircleextendsShape{privateradius:number;构造函数(半径:数字){超级();this.radius=半径;}getArea(){returnthis.radius*this.radius*3.14;}}classRectangleextendsShape{privatewidth:number;私人身高:数字;构造函数(宽度:数字,高度:数字){super();this.width=宽度;this.height=高度;}getArea(){返回this.width*this.height;}}functioncalcArea(shape:Shape){returnshape.getArea();}console.log(calcArea(newCircle(3)));console.log(calcArea(newRectangle(2,6)));抽象方法和方法被abstract修饰,在定义抽象类时有两个规则:抽象方法必须在子类中实现。抽象类是不能实例化的类型类,也可以作为数据类型,可以作为类型注解。类人{名称:字符串=“爱丽丝”;eating(){}}constperson:Person={name:"kiki",eating(){console.log("我正在吃");},};functionprintPerson(person:Person){console.log(person.name);}printPerson(newPerson());printPerson(person);printPerson({name:"macsu",eating(){}});只要和类的Format匹配,就可以使用类的类型。函数和类在JS和TS中非常重要。它们可以帮助开发者在开发过程中更好地规范代码,减少上线失败。以上是关于TypeScript函数和类的内容。关于js和ts,需要开发者掌握的东西还是很多的。可以看看我写的其他博文,持续更新中~