原来TypeScript中的接口和泛型这么好懂

“接口”和“泛型”是TypeScript相对于JavaScript新增的，用来定义数据类型。前两篇总结了TypeScript中的类型注解、函数和类，我们来看看本文的接口和泛型。该接口使用接口关键字来定义数据类型对象类型。当有较长的数据类型约束时，我们可以使用type关键字为类型注解起别名，或者通过接口UserType={name:string;来定义类型。年龄？:number};constuser:UserType={name:"kiki",age:18,};interfaceIUserType{name:string;age?:number}constperson:IUserType={name:'alice',age:20}索引类型接口和类型定义对象都可以是只知道键的类型。当不知道具体key值时，定义typeinterfaceILanguage{[index:number]:string;}constlanguage:ILanguage={0:"html",1:"css",2:"js",};typeScore={[name:string]:number;}constscore:Score={语文:120,数学:95,英文:88,};function定义带类型的函数时，interface和type的语法略有不同:ISelfType,logFn:LogType){fn(arg);logFn(arg);}functionself(arg:string){returnarg;}console.log(print("hello",self,self));继承接口可以实现多重继承，inheritance后一个接口有所有父类的类型注解interfaceISwim{swimming:()=>void;}interfaceIEat{eating:()=>void;}interfaceIBirdextendsISwim,IEat{}constbird:IBird={swimming(){},eating(){},};crosstypecrosstype其实是相关的使用&符号操作界面后，需要满足操作界面所有类型注解interfaceISwim{swimming:()=>void;}interfaceIEat{eating:()=>void;}typeFish=ISwim|IEat;typeBird=ISwim&IEat;constfish:Fish={swimming(){},};constbird:Bird={swimming(){},eating(){},};export{}接口实现接口可以使用implements关键字通过类实现。一个类只能继承一个父类，但可以实现多个接口(){}eating(){}}classPersonimplementsISwim{swimming(){}}functionswimAction(iswim:ISwim){iswim.swimming()}swimAction(newFish())swimAction(newPerson())做没有实现接口的类，自然也就没有接口和类型的区别了。很多时候interface和type是一样的，但是有一个明显的区别就是interface可以重复定义，type注解会累积，重复定义type会报错。如果对象的引用被赋值，则执行新鲜度擦除操作，在类型检测时擦除多余的属性。如果仍然满足类型，则可以分配枚举类型。枚举类型通过enum关键字定义，与联合类型实现的功能类似，但枚举类型的代码可读性会更高。enumDirection{LEFT,RIGHT,TOP,BOTTOM,}functionturnDirection(direction:Direction){switch(direction){caseDirection.LEFT:break;案例方向。右：休息；caseDirection.TOP:break;caseDirection.BOTTOM:break;默认值：constfoo:never=direction;休息;}}turnDirection(Direction.LEFT);，可以将类型注解定义为泛型，使用时指定具体类型，使用<>定义泛型functionself(element:T){returnelement;}self("alice");self(2);self(null);如果没有定义类型，ts会推导出类型，可能不是我们想要的类型，比如下面的字符串就不是“string”字符串类型，而是“hello”字面量类型。当有多个参数时，只需在泛型函数中定义多个即可foo(a:T,b:E,c:O){}foo(1,'alice',false)foo(['alice'],undefined,null)泛型接口在接口中使用了泛型，在接口名后面写上类型注解interfacePerson{name:T;age:E;}constperson:Person={name:"alice",age:20,};在接口中使用泛型时，无法执行类型推导。使用时必须指定具体的类型，除非在定义接口的时候给了泛型默认值是setinterfaceBook{category:T;price:E;}constbook:Book={category:"nature",price:88.6,};constdictionary:Book={category:1,price:'88'}泛型类中定义的方式只是将具体的数据类型替换为泛型类型，可用于类中的类型推导类Point{x:T;是：T；z：T；构造函数（x：T，y：T，z：T）{this.x=x;这个.y=y;这个.z=z;}}新点（“1.55”，“2.34”，“3.67”）;新点（1.55，2.34，3.67）;类型约束泛型只要传入的参数满足泛型条件，即具有长度属性interfaceILength{length:number;}functiongetLength(element:T){returnelement就可以对泛型进行约束.length;}getLength("alice");getLength(["alice","kiki","lucy"]);getLength({length:5});接口、枚举和泛型在JavaScript中是没有的，但它们在TypeScript中是非常重要的类型注解。以上是关于TypeScript接口和泛型的内容。关于js和ts，开发者需要掌握的东西还是很多的。大家可以看看我写的其他博文，持续更新中~