【TS】962- TS的 interface 和 type 到底有什么区别？

刺骨的言语ヽ痛彻心扉 2023-01-22 12:54 21阅读 0赞

![be7882d001ef61f27389effca237f78b.png][]

大前端 前端知识宝库 坚持日更

来源：阳呀呀

https://segmentfault.com/a/1190000039834284

接口和类型别名非常相似，在大多情况下二者可以互换。在写TS的时候，想必大家都问过自己这个问题，我到底应该用哪个呢？希望看完本文会给你一个答案。知道什么时候应该用哪个，首先应该了解二者之间的相同点和不同点，再做出选择。

### 接口 vs 类型别名 相同点 ###

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

interface Point {
      x: number
      y: number
    }
    
    interface SetPoint {
      (x: number, y: number): void;
    }

type Point = {
      x: number;
      y: number;
    };
    
    type SetPoint = (x: number, y: number) => void;

#### 2. 都可以扩展 ####

两者的扩展方式不同，但并不互斥。接口可以扩展类型别名，同理，类型别名也可以扩展接口。

接口的扩展就是继承，通过 `extends` 来实现。类型别名的扩展就是交叉类型，通过 `&` 来实现。

// 接口扩展接口
    interface PointX {
        x: number
    }
    
    interface Point extends PointX {
        y: number
    }

// 类型别名扩展类型别名
    type PointX = {
        x: number
    }
    
    type Point = PointX & {
        y: number
    }

// 接口扩展类型别名
    type PointX = {
        x: number
    }
    interface Point extends PointX {
        y: number
    }

// 类型别名扩展接口
    interface PointX {
        x: number
    }
    type Point = PointX & {
        y: number
    }

### 接口 vs 类型别名不同点 ###

#### 1. 类型别名更通用（接口只能声明对象，不能重命名基本类型） ####

类型别名的右边可以是任何类型，包括基本类型、元祖、类型表达式（`&`或`|`等类型运算符）；而在接口声明中，右边必须为结构。例如，下面的类型别名就不能转换成接口：

type A = number
    type B = A | string

#### 2. 扩展时表现不同 ####

扩展接口时，TS将检查扩展的接口是否可以赋值给被扩展的接口。举例如下：

interface A {
        good(x: number): string,
        bad(x: number): string
    }
    interface B extends A {
        good(x: string | number) : string,
        bad(x: number): number // Interface 'B' incorrectly extends interface 'A'.
                               // Types of property 'bad' are incompatible.
                               // Type '(x: number) => number' is not assignable to type '(x: number) => string'.
                               // Type 'number' is not assignable to type 'string'.
    }

但使用交集类型时则不会出现这种情况。我们将上述代码中的接口改写成类型别名，把 `extends` 换成交集运算符 `&`，TS将尽其所能把扩展和被扩展的类型组合在一起，而不会抛出编译时错误。

type A = {
        good(x: number): string,
        bad(x: number): string
    }
    type B = A & {
         good(x: string | number) : string,
         bad(x: number): number 
    }

#### 3. 多次定义时表现不同 ####

接口可以定义多次，多次的声明会合并。但是类型别名如果定义多次，会报错。

interface Point {
        x: number
    }
    interface Point {
        y: number
    }
    const point: Point = {x:1} // Property 'y' is missing in type '{ x: number; }' but required in type 'Point'.
    
    const point: Point = {x:1, y:1} // 正确

type Point = {
        x: number // Duplicate identifier 'A'.
    }
    
    type Point = {
        y: number // Duplicate identifier 'A'.
    }

### 到底应该用哪个 ###

如果接口和类型别名都能满足的情况下，到底应该用哪个是我们关心的问题。感觉哪个都可以，但是强烈建议大家只要能用接口实现的就优先使用接口，接口满足不了的再用类型别名。

为什么会这么建议呢？其实在TS的wiki中有说明。具体的文章地址在这里。

以下是`Preferring Interfaces Over Interps`的译文：

> 大多数时候，对于声明一个对象，类型别名和接口表现的很相似。
> 
>     interface Foo { prop: string }
>     
>     type Bar = { prop: string };
> 
> 然而，当你需要通过组合两个或者两个以上的类型实现其他类型时，可以选择使用接口来扩展类型，也可以通过交叉类型（使用 `&` 创造出来的类型）来完成，这就是二者开始有区别的时候了。
> 
>  *  接口会创建一个单一扁平对象类型来检测属性冲突，当有属性冲突时会提示，而交叉类型只是递归的进行属性合并，在某种情况下可能产生 `never` 类型
>  *  接口通常表现的更好，而交叉类型做为其他交叉类型的一部分时，直观上表现不出来，还是会认为是不同基本类型的组合
>  *  接口之间的继承关系会缓存，而交叉类型会被看成组合起来的一个整体
>  *  在检查一个目标交叉类型时，在检查到目标类型之前会先检查每一个组分

上述的几个区别从字面上理解还是有些绕，下面通过具体的列子来说明。

interface Point1 {
        x: number
    }
    
    interface Point extends Point1 {
        x: string // Interface 'Point' incorrectly extends interface 'Point1'.
                  // Types of property 'x' are incompatible.
                  // Type 'string' is not assignable to type 'number'.
    }

type Point1 = {
        x: number
    }
    
    type Point2 = {
        x: string
    }
    
    type Point = Point1 & Point2 // 这时的Point是一个'number & string'类型，也就是never

从上述代码可以看出，接口继承同名属性不满足定义会报错，而相交类型就是简单的合并，最后产生了 `number & string` 类型，可以解释译文中的第一点不同，其实也就是我们在不同点模块中介绍的扩展时表现不同。

再来看下面例子：

interface PointX {
        x: number
    }
    
    interface PointY {
        y: number
    }
    
    interface PointZ {
        z: number
    }
    
    interface PointXY extends PointX, PointY {
    }
    
    interface Point extends PointXY, PointZ {
       
    }
    const point: Point = {x: 1, y: 1} // Property 'z' is missing in type '{ x: number; y: number; }' but required in type 'Point'

type PointX = {
        x: number
    }
    
    type PointY = {
        y: number
    }
    
    type PointZ = {
        z: number
    }
    
    type PointXY = PointX & PointY
    
    type Point = PointXY & PointZ
    
    const point: Point = {x: 1, y: 1} // Type '{ x: number; y: number; }' is not assignable to type 'Point'.
                                      // Property 'z' is missing in type '{ x: number; y: number; }' but required in type 'Point3'.

从报错中可以看出，当使用接口时，报错会准确定位到Point。但是使用交叉类型时，虽然我们的 `Point` 交叉类型是 `PointXY & PointZ`， 但是在报错的时候定位并不在 `Point` 中，而是在 `Point3` 中，即使我们的 `Point` 类型并没有直接引用 `Point3` 类型。

如果我们把鼠标放在交叉类型 `Point` 类型上，提示的也是 `type Point = PointX & PointY & PointZ`，而不是 `PointXY & PointZ`。

这个例子可以同时解释译文中第二个和最后一个不同点。

### 结论 ###

有的同学可能会问，如果我不需要组合只是单纯的定义类型的时候，是不是就可以随便用了。但是为了代码的可扩展性，建议还是优先使用接口。现在不需要，谁能知道后续需不需要呢？所以，让我们大胆的使用接口吧~

![834b7e9f2d051cbe272370907d6dcca9.gif][]

[1. JavaScript 重温系列（22篇全）][1. JavaScript _22]

[2. ECMAScript 重温系列（10篇全）][2. ECMAScript _10]

[3. JavaScript设计模式 重温系列（9篇全）][3. JavaScript_ _9]

4. [正则 / 框架 / 算法等 重温系列（16篇全）][_ _ _ _ _16]

5. [Webpack4 入门（上）][Webpack4]|| [Webpack4 入门（下）][Webpack4 1]

6. [MobX 入门（上）][MobX] || [MobX 入门（下）][MobX 1]

7. 120[\+篇原创系列汇总][Link 1]

![d129f86e184dccc8dbfbcf13a3bd7439.gif][]

回复“**加群**”与大佬们一起交流学习~

点击“**阅读原文**”查看 120+ 篇原创文章

[be7882d001ef61f27389effca237f78b.png]: /images/20221020/de591f0236c84879a09331f334205650.png
[834b7e9f2d051cbe272370907d6dcca9.gif]: /images/20221020/fa42a58247444b5696035635f6200adf.png
[1. JavaScript _22]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224ea86b5adfc10c3aa1841be3879b9360d671e98cc73391c2490246f1348857b9821d32c&idx=1&mid=2458453187&scene=21&sn=a69b4d7d991867a07a933f86e66b9f55#wechat_redirect
[2. ECMAScript _10]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e086b5adf6dad41a0d36b77a9bfb4bc9f0d29a816266b3e28c892e54274967dbce380b&idx=1&mid=2458453193&scene=21&sn=e5392cb77bc17c9e94b6c826b5f52a83#wechat_redirect
[3. JavaScript_ _9]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e386b5adf554ab928cdeaf7ee16dbb2d895be17f2a12a59054a75b913470ca7649bbc7&idx=1&mid=2458453194&scene=21&sn=e7f0734b04484bee5e10a85a7cbb85c1#wechat_redirect
[_ _ _ _ _16]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e286b5adf432850f82db18cc8647d639836798cf16b478d9a6f7c81df87c6da5257684&idx=1&mid=2458453195&scene=21&sn=1e0c8b7ea8ddc207b523ec0a636a5254#wechat_redirect
[Webpack4]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251f86b5ac09dbbbb7c8e1d80c6cbd793a523cdfa690f8734def57812e616b9906aeec79&idx=1&mid=2458453302&scene=21&sn=904e40a421024ea0d394e9850b674012#wechat_redirect
[Webpack4 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251e86b5ac08464872cd880811423e0d1bbcebbe11dcac9d99fa38c5332c089c06d65d95&idx=1&mid=2458453303&scene=21&sn=422f2b5e22c3b0e91a8353ee7e53fed9#wechat_redirect
[MobX]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264c86b5af5aa7300a04d55efead6223e310d68e10222cd3577a25c783d3429f00767960&idx=1&mid=2458453605&scene=21&sn=0a506769d5eeb7953f676e93fb4d18eb#wechat_redirect
[MobX 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264086b5af5611524eedb0d409afe86d859dce6ceff1c17ddab49d353c385e45611a73fa&idx=1&mid=2458453609&scene=21&sn=f0c22e82f2537204d9b173161bae6b82#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224dd86b5adcbd98189315e60de6a0106993690b69927cc1c1f19fd8f591fefce4e3db51f&idx=2&mid=2458453236&scene=21&sn=daf00392f960c115463c5aaf980620b4#wechat_redirect
[d129f86e184dccc8dbfbcf13a3bd7439.gif]: /images/20221020/72b90741512948e3a84cf0ecc5ab0e85.png