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

[Frontend]你好,我叫TypeScript02──变量和接口

时间:2023-03-13 16:59:47 科技观察

TS变量和接口变量声明其实TS里的变量声明和JS里的一样,所以你懂JS和TS,无非就是var,let和const,记住下表内容就可以解决大部分场景问题。接口在面向对象的语言中,接口是一个比较核心的概念。它的作用是命名类型并为代码定义契约。其实就是对行为的抽象,对物体形状的描述。在TS中是类型检查值具有的结构。//原方法functionprintLabel(labelObj:{label:string}){console.log(labelObj.label);}letmyObj={name:"wenbo",label:"size110"};printLabel(myObj);//接口方法interfaceLabelValue{label:string;}functionprintLabel2(labelValue:LabelValue){console.log(labelValue.label);}printLabel2(myObj);上面的代码表明,printLabel传入的对象labelObj有一个string类型的label属性。传入的对象参数其实包含了很多属性,但是编译器会智能地检查是否存在必要的属性以及类型是否匹配。printLabel2接口实际上是对printLabel传递的对象类型的抽象,定义了它的参数行为,类型检查器不会关注属性的顺序。接口对象的声明方法接口对象的声明方法很简单,在接口名前加上interface即可。interfacemyObj{name:string;label:string;}界面对象的基本属性界面对象的属性无非就是默认属性、可选属性和只读属性。默认属性:表示该属性必须存在,可读可改可选属性:表示该属性可选,可读可改,只需加一个?属性名后的符号,如:name?:string;.可以预定义可能的属性以在引用不存在的属性时捕获错误。只读属性:表示该属性只能读取,不能修改。只需要在创建对象时在指定的属性名前加上readonly即可,保证创建后不会被修改。interfaceLabelValue{readonlyid:number;//只读属性,表示该属性只能读取,不能修改name?:string;//可选属性,表示该属性可选label:string;//默认属性,表明这个属性必须存在}functionprintLabel(labelValue:LabelValue){console.log(labelValue);}letmyObj:LabelValue={name:"yichuan",id:100,label:"size110"};printLabel(myObj);//{name:'yichuan',id:100,label:'size110'}myObj.id=200;//错误:Cannotassignto'id'becauseitisaconstantoraread-onlyproperty.letmyObj2:LabelValue={id:100};//Type'{id:number}'isnotassignabletotype'LabelValue'.//Property'label'ismissingintype'{id:number}'.//error:missinglabelattribute接口对象的函数类型接口可以在JavaScript中描述对象的各种形状。除了用属性描述普通对象外,接口还可以描述函数类型。使用接口来表示函数类型,需要为接口定义一个调用签名,它是一个只有参数列表和返回值类型的函数,其中参数列表中的每个参数都必须有一个属性名和类型.interfacemyFun{(name:string,age:number):void;//()中的是函数类型,void是否有返回值}letiFun:myFun;iFun=function(name:string,age:number){console.log(`mynameis${name},myageis${age}`)}iFun("yichuan",18);//mynameisyichuan,myageis18我们可以看到:先创建一个函数类型接口myFun,然后再创建一个函数iFun类型的变量,并为该变量分配一个相同类型的函数。对于函数类型检查,函数的参数名称不需要与接口定义的名称相匹配。类型检查器一个一个地检查函数参数,判断对应位置的参数类型是否匹配。当然,如果你没有在函数中指定参数类型,TS类型系统会从接口中推断它并执行匹配检查。interfacemyFun{(name:string,age:number):void;}letiFun:myFun;iFun=function(name,age){console.log(`mynameis${name},myageis${age}`)}iFun("yichuan",18);////mynameisyichuan,myageis18接口对象的可索引类型类似于使用接口描述函数类型,只是可索引类型使用描述对象索引类型的“索引签名”和索引返回值类型。//定义一个学生列表接口interfaceStudentList{id:number;name:string;}//定义一个类接口interfaceClassList{classname:string;students:StudentList[];[index:string]:any;//可以使用any字符串类型索引声明的对象,值为任意类型}functionprintLabel(data:ClassList){returndata;}printLabel({classname:"class1",numbers:30,students:[{id:2001,name:"yichuan"}]})可索引接口的类型只能使用字符串和数字来定义索引签名。两种类型的索引可以同时使用,但是数字索引的返回值必须是字符串索引返回值类型的子类型。当使用数字进行索引时,JavaScript会将其转换为字符串,然后对对象进行索引。StringdefinitionindexsignaturenumberdefinitionindexsignaturemixedtypedefinitionindexsignatureclassAnimal{name:string;}classDogeextendsAnimal{breed:string;}//错误:使用数字字符串索引,有时会得到一个完全不同的Animal!interfaceNotOkay{[x:number]:Animal;[x:string]:Dog;}字符串索引签名很好地描述了字典模式,它们还确保所有属性与其返回类型相匹配。因为字符串索引同时声明了obj.property和obj["property"]。为了防止分配给索引,可以将其索引签名定义为只读类型。interfaceReadonlyStringArray{readonly[index:number]:string;}letmyArray:ReadonlyStringArray=["Alice","Bob"];myArray[2]="Mallory";//错误!在类接口TS中,类的设置可以强制Type约定,即类接口。interfaceFatherInterface{firstName:string;}classSonimplementsFatherInterface{firstName!:String;constructor(lastName:string,age:number){};}注意:接口只描述类的public部分,不描述public和private部分。它不会帮助你检查一个类是否有一些私有成员。当一个类实现一个接口时,它必须实现该接口的所有属性。接口不能约束类的构造函数。类型检查器只检查实例部分。我们知道一个类有两种类型:静态部分的类型和实例的类型。当你定义一个带有构造函数签名的接口并试图定义一个类来实现这个接口时,你会得到一个错误:只有实例部分被类型检查,构造函数存在于类的静态部分,所以不是检查范围内。interfaceFatherInterface{new(firstName:string);}classSonimplementsFatherInterface{constructor(firstName:string,lastName:string,age:number){};}继承接口和类一样,接口也可以相互继承。一个接口的成员可以复制到另一个接口,灵活地将接口划分为可重用的模块。interfaceDogInterface{type:string;}interfaceErhaextendsDogInterface{name:string;age:number;}leterha={};erha.type="dog";erha.name="bobo";erha.age=2;同样,接口也可以实现多重继承。classSonimplementsFatherInterface{constructor(firstName:string,lastName:string,age:number){};}interfaceAnimalInterface{foal:string;}interfaceDogInterface{type:string;}interfaceErhaextendsDogInterface,AnimalInterface{name:string;age:number;}leterha=<二哈>{};erha.type="dog";erha.name="bobo";erha.age=2;erha.foal="delivery";总结接口接口的定义其实很简单,和对象的定义一样。接口对象的基本属性包括:默认属性、可选属性和只读属性。可索引类型只能定义为两种形式:字符串和数字。类接口继承的形式与类继承类似。参考文章《重学TS》《ts中文文档》《大话 Typescript 接口》by阿宝哥本文转载自微信公众号《前端引力》,可通过以下二维码关注。转载本文请联系前端Gravity公众号。