TypeScript中Interface与Type的区别？该用哪个比较好？

本文转载自微信公众号「三分钟学前端」，作者sisterAn。转载本文请联系三分钟学前端公众号。

创新互联是专业的弋阳网站建设公司，弋阳接单;提供成都网站设计、网站制作、外贸营销网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行弋阳网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

接口 与 类型别名 的异同点

相同点

1. 都可以描述对象或函数

  
 
 
 
    
   
  
  
  
  1. // 接口 
    2.    
  
  
  
  2. interface Sister { 
    3.    
  
  
  
  3.   name: string; 
    4.    
  
  
  
  4.   age: number; 
    5.    
  
  
  
  5. } 
    6.    
  
  
  
  6.  
    7.    
  
  
  
  7. interface SetSister { 
    8.    
  
  
  
  8.   (name: string, age: number): void; 
    9.    
  
  
  
  9. } 
    10.    
  
  
  
  10.  
    11.    
  
  
  
  11. // 类型别名 
    12.    
  
  
  
  12. type Sister = { 
    13.    
  
  
  
  13.   name: string; 
    14.    
  
  
  
  14.   age: number; 
    15.    
  
  
  
  15. }; 
    16.    
  
  
  
  16.  
    17.    
  
  
  
  17. type SetSister = (name: string, age: number) => void; 
    18.

2. 都可以扩展

interface 和 type 可以混合扩展，也就是说 interface 可以扩展 type，type 也可以扩展 interface。

但需要注意的是，接口的扩展是继承( extends )。类型别名的扩展就是交叉类型(通过 & 实现)

  
 
 
 
    
   
  
  
  
  1. // 接口 
    2.    
  
  
  
  2. interface SisterAn { 
    3.    
  
  
  
  3.     name: string; 
    4.    
  
  
  
  4. } 
    5.    
  
  
  
  5.  
    6.    
  
  
  
  6. // 类型别名 
    7.    
  
  
  
  7. type SisterRan = { 
    8.    
  
  
  
  8.     age: number; 
    9.    
  
  
  
  9. } 
    10.   
 
 
 
  
 
 
 
    
   
  
  
  
  1. // 接口扩展接口 
    2.    
  
  
  
  2. interface Sister extends SisterAn { 
    3.    
  
  
  
  3.     age: number; 
    4.    
  
  
  
  4. } 
    5.   
 
 
 
  
 
 
 
    
   
  
  
  
  1. // 类型别名扩展类型别名 
    2.    
  
  
  
  2. type SisterPro = SisterRan & { 
    3.    
  
  
  
  3.     name: string; 
    4.    
  
  
  
  4. } 
    5.   
 
 
 
  
 
 
 
    
   
  
  
  
  1. // 接口扩展类型别名 
    2.    
  
  
  
  2. interface Sister extends SisterRan { 
    3.    
  
  
  
  3.     name: string; 
    4.    
  
  
  
  4. } 
    5.   
 
 
 
  
 
 
 
    
   
  
  
  
  1. // 类型别名扩展接口 
    2.    
  
  
  
  2. type SisterPro = SisterAn & { 
    3.    
  
  
  
  3.     age: number; 
    4.    
  
  
  
  4. } 
    5.

区别

官方 中这样介绍两者的区别：

Type aliases and interfaces are very similar, and in many cases you can choose between them freely. Almost all features of an interface are available in type, the key distinction is that a type cannot be re-opened to add new properties vs an interface which is always extendable.

意思就是说几乎接口的所有特性都可以通过类型别名来实现，主要区别在于：

1. 不同的声明范围

与接口不同，可以为任意的类型创建类型别名

类型别名的右边可以是任何类型，包括基本类型、元祖、类型表达式( & 或 | 等);而在接口声明中，右边必须为变量结构。例如，下面的类型别名就不能转换成接口

  
 
 
 
    
   
  
  
  
  1. type Name = string 
    2.    
  
  
  
  2. type Text = string | { text: string }; 
    3.    
  
  
  
  3. type Coordinates = [number, number]; 
    4.

2. 不同的扩展形式

接口是通过继承的方式来扩展，类型别名是通过 & 来扩展

  
 
 
 
    
   
  
  
  
  1. // 接口扩展 
    2.    
  
  
  
  2. interface SisterAn { 
    3.    
  
  
  
  3.     name: string; 
    4.    
  
  
  
  4. } 
    5.    
  
  
  
  5. interface Sister extends SisterAn { 
    6.    
  
  
  
  6.     age: number; 
    7.    
  
  
  
  7. } 
    8.    
  
  
  
  8.  
    9.    
  
  
  
  9. // 类型别名扩展 
    10.    
  
  
  
  10. type SisterRan = { 
    11.    
  
  
  
  11.     age: number; 
    12.    
  
  
  
  12. } 
    13.    
  
  
  
  13. type SisterPro = SisterRan & { 
    14.    
  
  
  
  14.     name: string; 
    15.    
  
  
  
  15. } 
    16.

这里需要注意的是，接口扩展时，typescript 会检查扩展的接口是否可以赋值给被扩展的接口

  
 
 
 
    
   
  
  
  
  1. // 接口扩展 
    2.    
  
  
  
  2. interface SisterAn { 
    3.    
  
  
  
  3.     name: string; 
    4.    
  
  
  
  4.     age: string 
    5.    
  
  
  
  5. } 
    6.    
  
  
  
  6.  
    7.    
  
  
  
  7. interface Sister extends SisterAn { 
    8.    
  
  
  
  8.     name: string; 
    9.    
  
  
  
  9.     age: number; 
    10.    
  
  
  
  10. } 
    11.    
  
  
  
  11. // 报错： 
    12.    
  
  
  
  12. //  Interface 'Sister' incorrectly extends interface 'SisterAn'. 
    13.    
  
  
  
  13. //  Types of property 'age' are incompatible. 
    14.    
  
  
  
  14. //  Type 'number' is not assignable to type 'string' 
    15.

但使用交集类型时就不会出现这种情况

  
 
 
 
    
   
  
  
  
  1. // 类型别名扩展 
    2.    
  
  
  
  2. type SisterRan = { 
    3.    
  
  
  
  3.  name: string; 
    4.    
  
  
  
  4.     age: string; 
    5.    
  
  
  
  5. } 
    6.    
  
  
  
  6. type SisterPro = SisterRan & { 
    7.    
  
  
  
  7.     name: string; 
    8.    
  
  
  
  8.     age: number; 
    9.    
  
  
  
  9. } 
    10.

类型别名扩展时，typescript 将尽其所能把扩展和被扩展的类型组合在一起，而不会抛出编译时错误

3. 不同的重复定义表现形式

接口可以定义多次，多次的声明会自动合并

  
 
 
 
    
   
  
  
  
  1. interface Sister { 
    2.    
  
  
  
  2.     name: string; 
    3.    
  
  
  
  3. } 
    4.    
  
  
  
  4. interface Sister { 
    5.    
  
  
  
  5.     age: number; 
    6.    
  
  
  
  6. } 
    7.    
  
  
  
  7.  
    8.    
  
  
  
  8. const sisterAn: Sister = { 
    9.    
  
  
  
  9.     name: 'sisterAn' 
    10.    
  
  
  
  10. }  
    11.    
  
  
  
  11. // 报错：Property 'age' is missing in type '{ name: string; }' but required in type 'Sister' 
    12.    
  
  
  
  12.  
    13.    
  
  
  
  13. const sisterRan: Sister = { 
    14.    
  
  
  
  14.     name: 'sisterRan',  
    15.    
  
  
  
  15.     age: 12 
    16.    
  
  
  
  16. } 
    17.    
  
  
  
  17. // 正确 
    18.

但是类型别名如果定义多次，会报错

  
 
 
 
    
   
  
  
  
  1. type Sister = { // Duplicate identifier 'Sister' 
    2.    
  
  
  
  2.     name: string; 
    3.    
  
  
  
  3. } 
    4.    
  
  
  
  4.  
    5.    
  
  
  
  5. type Sister = { // Duplicate identifier 'Sister' 
    6.    
  
  
  
  6.     age: number; 
    7.    
  
  
  
  7. } 
    8.

如何选择 Interface 、 Type

虽然 官方 中说几乎接口的所有特性都可以通过类型别名来实现，但建议优先选择接口，接口满足不了再使用类型别名，在 typescript 官网 Preferring Interfaces Over Intersections 有说明，具体内容如下：

大多数时候，对象类型的简单类型别名的作用与接口非常相似

  
 
 
 
    
   
  
  
  
  1. interface Foo { prop: string } 
    2.    
  
  
  
  2.  
    3.    
  
  
  
  3. type Bar = { prop: string }; 
    4.

但是，一旦你需要组合两个或多个类型来实现其他类型时，你就可以选择使用接口扩展这些类型，或者使用类型别名将它们交叉在一个中(交叉类型)，这就是差异开始的时候。

接口创建一个单一的平面对象类型来检测属性冲突，这通常很重要! 而交叉类型只是递归的进行属性合并，在某种情况下可能产生 never 类型

接口也始终显示得更好，而交叉类型做为其他交叉类型的一部分时，直观上表现不出来，还是会认为是不同基本类型的组合。

接口之间的类型关系会被缓存，而交叉类型会被看成组合起来的一个整体。

最后一个值得注意的区别是，在检查到目标类型之前会先检查每一个组分。

出于这个原因，建议使用接口/扩展扩展类型而不是创建交叉类型。

  
 
 
 
    
   
  
  
  
  1. - type Foo = Bar & Baz & { 
    2.    
  
  
  
  2. -     someProp: string; 
    3.    
  
  
  
  3. - } 
    4.    
  
  
  
  4. + interface Foo extends Bar, Baz { 
    5.    
  
  
  
  5. +     someProp: string; 
    6.    
  
  
  
  6. + } 
    7.

简单的说，接口更加符合 JavaScript 对象的工作方式，简单的说明下，当出现属性冲突时：

  
 
 
 
    
   
  
  
  
  1. // 接口扩展 
    2.    
  
  
  
  2. interface Sister { 
    3.    
  
  
  
  3.     sex: number; 
    4.    
  
  
  
  4. } 
    5.    
  
  
  
  5.  
    6.    
  
  
  
  6. interface SisterAn extends Sister { 
    7.    
  
  
  
  7.     sex: string; 
    8.    
  
  
  
  8. } 
    9.    
  
  
  
  9. // index.ts(5,11): error TS2430: Interface 'SisterAn' incorrectly extends interface 'Sister'. 
    10.    
  
  
  
  10. //  Types of property 'sex' are incompatible. 
    11.    
  
  
  
  11. //    Type 'string' is not assignable to type 'number'. 
    12.   
 
 
 
  
 
 
 
    
   
  
  
  
  1. // 交叉类型 
    2.    
  
  
  
  2. type Sister1 = { 
    3.    
  
  
  
  3.     sex: number; 
    4.    
  
  
  
  4. } 
    5.    
  
  
  
  5.  
    6.    
  
  
  
  6. type Sister2 = { 
    7.    
  
  
  
  7.     sex: string; 
    8.    
  
  
  
  8. } 
    9.    
  
  
  
  9.  
    10.    
  
  
  
  10. type SisterAn = Sister1 & Sister2; 
    11.    
  
  
  
  11. // 不报错，此时的 SisterAn 是一个'number & string'类型，也就是 never 
    12.

来源：https://github.com/Advanced-Frontend/Daily-Interview-Question

网站标题：TypeScript中Interface与Type的区别？该用哪个比较好？
URL地址：http://www.mswzjz.com/qtweb/news36/191286.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

静态网站知识

行业网站建设

成都微信小程序开发　　 　成都网站建设公司　　 　成都谷歌推广　　 　绵阳电信机房　　 　教育培训网站建设方案　　 　腾讯免备案空间　　 　西部信息服务器托管　　 　成都微商城开发　　 　安卓开发　　 　成都名片印刷　　 　成都网站建设　　 　成都网站制作　　 　网上商城管理系统　　 　成都二枢电信服务器托管　　 　成都网站设计　　 　服务器租用　　 　南部网站建设　　 　青年旅行社　　 　成都网站制作　　 　网站改版