typescript type和interface(typescript 类型声明)

TheForceProject[TypeScript]TS个人主页中类型声明中类型和接口的区别：别叫猫老师

作者简介：博客之星2022年前端领域TOP2，前端领域优质作者，阿里云专家博主。专注于各个领域的前端技术，一起学习，一起进步，一起努力吧！

优质专栏：vue3从入门到熟练、TypeScript从入门到实践

资料收集：你可以免费向我获取高级前端资料

钓鱼、学习、交流：我们的宗旨是在工作中钓鱼，在钓鱼中进步。期待大佬们一起来钓鱼。

目录

1.栏目介绍2.TS中类型声明中类型与接口的区别1.声明常用类型(1)定义基本类型(2)定义函数类型(3)定义对象类型(4)定义泛型2接口可以由类实现，但类型不能。3.interface支持extends实现接口继承，但type不支持(1)单接口继承(2)多接口继承4.interface可以定义多个同名接口。接口合并了，但是type不支持5.type可以使用typeof获取实例的类型，但是接口不支持一、专栏介绍

TypeScript从入门到实践专栏是博主学习工作过程的总结，非常实用，内容我们会不断完善，欢迎订阅，学习TS不迷路。

TS系列标题基础篇TS简介基础篇TS类型声明基础篇TS接口类型基础篇TS交叉类型Union类型基础篇TS类型断言基础篇TS类型保护进阶章TS函数重载进阶章TS泛型进阶章TS装饰器进阶章TS条件类型进阶章TS自定义类型对象属性必须可选，对象属性可选进阶章两者的区别TS二、TS中type和interface在类型声明时的区别

中类型声明中的type和interface在TS中，interface和type都可以用来自定义数据类型。它们有很多相似之处，但也有不同之处。我们一般选择type来定义基本类型别名、联合类型、元组等类型，选择interface来定义复杂的对象、类和接口继承。

1.声明常见类型

定义基本类型

typeAge=number;interfacePerson{name:string;年龄：年龄；}

定义函数类型

类型问候语=(name:string)=string;interfaceGreeter{(name:string):string;}

定义对象类型

类型点={x:数字；y:号};接口矩形{width:数字；身高：号；位置：点；}

定义泛型

类型ListT={data:T[];add:(item:T)=void;}接口ListT{data:T[];add:(item:T)=void;}

使用泛型的接口示例如下：

接口ContainerT{value:T;获取:T；set(value:T):void;}classNumberContainer实现Containernumber{value:number;get(){返回this.value;}set(value:数字){this.value=value;}}const容器=newNumberContainer();container.set(42);console.log(container.get());//

2.interface可以被类(class)实现(implement)，而type不能

接口动物{name:字符串；say:()=void;}classDog实现Animal{name:string;构造函数(name:string){this.name=name;}say(){console.log('你好！');}}constmyDog=newDog('Sparky');myDog.speak();//输出你好

上面的代码使用interface定义了Animal接口，包含name和speak方法，然后使用class实现该接口，创建Dog的实例，并调用speak方法。

类型动物={name:字符串；talk:()=void;}classDogImplementsAnimal{//这里会报错，因为Animal是类型别名，无法通过类实现}

上面的代码编译时会出错，因为type定义的Animal类型只是别名，不是接口，无法被类实现。因此，当需要定义一个类可以实现的类型时，应该使用接口来定义它。

3.interface支持extends实现接口的继承，而type不支持

单接口继承

接口Animal{name:string;speak:()=void;}接口Pet扩展Animal{owner:string;play:()=void;}类Dog实现Pet{name:字符串；owner:字符串；构造函数{this.name=name;this.owner=Owner;}speak(){console.log('speak:hello');}play(){console.log(`${this.name}正在和${this.owner}玩`);}}constmyDog=newDog('myPet','猫先生');myDog.speak();//输出'speak:hello'myDog.play();//输出'myPet正在和Mr.Cat玩耍'

多接口继承

由于type只是一个类型别名，不能包含具体的属性和方法实现，因此不支持通过extends关键字继承接口。如果需要继承类型别名，则需要使用交集类型进行组合。

当需要一个接口继承多个其他接口时，使用接口会更方便。因为interface允许使用逗号分隔来继承多个接口，而type只能使用cross-type()来实现继承。

例如：

接口Person{name:字符串；age:数字；}接口Employee{company:字符串；jobTitle:string;}interfaceManagerextendsPerson,Employee{teamSize:number;}constmanager:Manager={name:'JohnDoe',age:40,company:'ABCInc.',jobTitle:'经理',teamSize:10,};

在上面的例子中，我们定义了三个接口：Person、Employee和Manager。Manager接口继承了Person和Employee接口，以及它自己的属性teamSize。如果使用类型来定义Manager类型，则需要使用跨类型来实现继承，但是这样实现起来比较复杂。

总的来说，接口和类型都有各自的优点和使用场景。TypeScript3.7之后，type还可以实现多种类型的声明合并和继承。因此，在选择使用接口还是类型时，应该根据具体情况来决定。

4.interface可以定义多个同名接口并合并，而type不支持

当合并两个或多个同名接口或类型时，interface允许声明多个同名接口并将它们合并为一个。例如：

接口用户{name:字符串；年龄：号码；}界面用户{性别：'男'|'女';}constuser:User={name:'猫老师',age:25,sex:'男',};

在上面的示例中，我们声明了两个具有相同名称User的接口并将它们合并为一个。如果使用type来定义User类型，则无法实现语句合并功能，代码会直接报错。

5.type可以使用typeof获取实例的类型，而interface不支持

类型Person={name:string;Age:number;}constjohn:Person={name:'John',age:30,}typePersonType=typeofjohn;//类型为{name:string,age:number}

在上图中，您可以看到PersonType类型与Person类型相同。通过typeof获取john的数据类型，然后赋值给PersonType类型。

接口不支持使用typeof运算符获取实例的类型。因为interface只是一个接口定义，它本身并不是一个值，也无法获取它的类型。