欢迎关注公众号如果你用过TypeScript，那你一定接触过Interface和Type。思考5秒钟，它们之间有什么相同点和不同点？如果您对它们的差异一无所知，请继续阅读。如果我们声明一个Point类型，我们可以通过以下两种方式达到我们想要的结果：interfacePoint{x:number;y:number;}或输入Point={x:number;y:number;}上面的例子并没有表现出接口和类型的区别。让我们进一步探索。TypeScript类型包括原始数据类型、对象类型、高级类型等。原始数据类型包括：boolean、number、string、null、undefined，以及ES6中的新类型Symbol和ES10中的BigInt。高级类型：联合类型（UnionsType）、泛型（Generics）联合类型（UnionsType）联合类型（UnionTypes）表示值可以是多种类型之一。例如：functionprintId(id:number|string){console.log("您的ID是："+id);}//OKprintId(101);//OKprintId("202");//ErrorprintId({myID:22342});//抛出错误信息//参数类型'{myID:number;}'不可分配给'string|类型的参数number'.//输入'{myID:number;}'不可分配给类型'number'。在上面的例子中，如果一个对象被删除并传入，就会抛出异常，'{myID:number;}'不能分配给字符串或数字类型。functionprintId(id:number|string){console.log(id.toUpperCase());}//ErrorProperty'toUpperCase'doesnotexistontype'string|数字'。类型“number”上不存在属性“toUpperCase”。我们来分析一下上面的报错。只有字符串类型string具有toUpperCase属性。number类型没有toUpperCase属性，推断ts类型时会报错。感觉TypeScript足够聪明，可以提前感知错误。如果要同时支持字符串类型和数字类型的参数，则需要改进。如下：functionprintId(id:number|string){if(typeofid==="string"){//在该分支中，id的类型为'string'console.log(id.toUpperCase());}else{//这里，id的类型是'number'console.log(id);}}类型别名（TypeAliases）类型别名是指给一个类型起一个新的名字。请注意，这不是定义新类型，而是给出新名称。类型别名常用于原始类型、联合类型（UnionType）typePoint={x:number;y:number;};//和前面的例子完全一样console.log("坐标的y值为"+pt.y);}printCoord({x:100,y:100});联合类型类型ID=数字|细绳;输入UserInputSanitizedString=字符串；functionsanitizeInput(str:string):UserInputSanitizedString{return"inputcontent"}类型别名是指给一个类型起一个新的名字，所以下面的string和UserInputSanitizedString都是同一类型对象的类型——接口在TypeScript中，我们使用定义对象类型的接口。与类型别名相反，接口仅用于对象类型。继承——extendinterface和type都支持继承，interface可以继承type，type可以继承interface，只是语法不同。示例：1.interfaceextendinterfaceinterfacePartialPointX{x:number;}interfacePointextendsPartialPointX{y:number;}2.interfaceextendtypetypePartialPointX={x:number;};interfacePointextendsPartialPointX{y:number;}type&typetypePartialPointX={x:数字;};//这里使用的继承是&typePoint=PartialPointX&{y:number;};type&interfaceinterfacePartialPointX{x:number;}typePoint=PartialPointX&{y:number;};Implementation——实现——一个类可以实现（implement）接口和类型，但不能实现（implement）一个联合类型（unionstype）interfacePoint{x:number;y:number;}classSomePointimplementsPoint{x=1;y=2;}typeAnotherPoint={x:数字;y:number;};classSomePoint2implementsAnotherPoint{x=1;y=2;}typePartialPoint={x:数字;}|{y：数字；};//无法实现联合类型，下面的代码会抛出异常classSomePartialPointimplementsPartialPoint{x=1;y=2;}DeclarationMerging—DeclarationMergingTypeScript在编译接口时会将同名接口合并为一个，但是type不行看一个简单的例子，接口名称相同，但是属性名称不同interfaceBox{height:number;width:number;}interfaceBox{scale:number;}letbox:Box={height:5,width:6,scale:10};上面的例子将两种Box类型组合成如下结果接口Box{height:number;宽度：数字；scale:number;}letbox:Box={height:5,width:6,scale:10};再看一个例子，接口名是一样的，但是属性名也是一样的（动物：狗）：狗；clone(animal:Cat):Cat;}合并三个Cloner的接口结果如下：interfaceCloner{clone(animal:Dog):Dog;克隆（动物：猫）：猫；clone(animal:Sheep):绵羊；clone(animal:Animal):Animal;}仔细观察，合并之后，第三个接口的属性在最前面，优先级最高。这个一定要注意如何选择Interface和Type？上面，我们比较了Interface和Type的异同。接下来我们总结一下。对于库中的类型或第三方库类型，定义一个公共API，应该使用接口来提供声明合并功能。另外，我们随意选择，但是一定要保证代码的一致性。参考资料https://www.typescriptlang.or...https://javascript.plainengli...
