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

电玩女神 2022-09-05 04:14 214阅读 0赞

点击上方 三分钟学前端，关注公众号

回复交流，加入前端编程面试算法每日一题群

面试官也在看的前端面试资料

![f4c67f219beb8f780dffec1702e7b46b.png][]

## 接口 与 类型别名 的异同点 ##

### 相同点 ###

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

// 接口
    interface Sister {
      name: string;
      age: number;
    }
    
    interface SetSister {
      (name: string, age: number): void;
    }
    
    // 类型别名
    type Sister = {
      name: string;
      age: number;
    };
    
    type SetSister = (name: string, age: number) => void;

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

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

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

// 接口
    interface SisterAn {
        name: string;
    }
    
    // 类型别名
    type SisterRan = {
        age: number;
    }

// 接口扩展接口
    interface Sister extends SisterAn {
        age: number;
    }

// 类型别名扩展类型别名
    type SisterPro = SisterRan & {
        name: string;
    }

// 接口扩展类型别名
    interface Sister extends SisterRan {
        name: string;
    }

// 类型别名扩展接口
    type SisterPro = SisterAn & {
        age: number;
    }

### 区别 ###

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

> 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. 不同的声明范围 ####

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

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

type Name = string
    type Text = string | { text: string };
    type Coordinates = [number, number];

#### 2. 不同的扩展形式 ####

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

// 接口扩展
    interface SisterAn {
        name: string;
    }
    interface Sister extends SisterAn {
        age: number;
    }
    
    // 类型别名扩展
    type SisterRan = {
        age: number;
    }
    type SisterPro = SisterRan & {
        name: string;
    }

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

// 接口扩展
    interface SisterAn {
        name: string;
        age: string
    }
    
    interface Sister extends SisterAn {
        name: string;
        age: number;
    }
    // 报错：
    //  Interface 'Sister' incorrectly extends interface 'SisterAn'.
    //  Types of property 'age' are incompatible.
    //  Type 'number' is not assignable to type 'string'

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

// 类型别名扩展
    type SisterRan = {
     name: string;
        age: string;
    }
    type SisterPro = SisterRan & {
        name: string;
        age: number;
    }

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

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

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

interface Sister {
        name: string;
    }
    interface Sister {
        age: number;
    }
    
    const sisterAn: Sister = {
        name: 'sisterAn'
    } 
    // 报错：Property 'age' is missing in type '{ name: string; }' but required in type 'Sister'
    
    const sisterRan: Sister = {
        name: 'sisterRan', 
        age: 12
    }
    // 正确

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

type Sister = { // Duplicate identifier 'Sister'
        name: string;
    }
    
    type Sister = { // Duplicate identifier 'Sister'
        age: number;
    }

## 如何选择 Interface 、 Type ##

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

> 大多数时候，对象类型的简单类型别名的作用与接口非常相似
> 
>     interface Foo { prop: string }
>     
>     type Bar = { prop: string };
> 
> 但是，一旦你需要组合两个或多个类型来实现其他类型时，你就可以选择使用接口扩展这些类型，或者使用类型别名将它们交叉在一个中（交叉类型），这就是差异开始的时候。
> 
>  *  **接口创建一个单一的平面对象类型来检测属性冲突，这通常很重要！** 而交叉类型只是递归的进行属性合并，在某种情况下可能产生 `never` 类型
>  *  接口也始终显示得更好，而交叉类型做为其他交叉类型的一部分时，直观上表现不出来，还是会认为是不同基本类型的组合。
>  *  接口之间的类型关系会被缓存，而交叉类型会被看成组合起来的一个整体。
>  *  最后一个值得注意的区别是，在检查到目标类型之前会先检查每一个组分。
> 
> 出于这个原因，建议使用接口/扩展扩展类型而不是创建交叉类型。
> 
>     - type Foo = Bar & Baz & {
>     -     someProp: string;
>     - }
>     + interface Foo extends Bar, Baz {
>     +     someProp: string;
>     + }

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

// 接口扩展
    interface Sister {
        sex: number;
    }
    
    interface SisterAn extends Sister {
        sex: string;
    }
    // index.ts(5,11): error TS2430: Interface 'SisterAn' incorrectly extends interface 'Sister'.
    //  Types of property 'sex' are incompatible.
    //    Type 'string' is not assignable to type 'number'.

// 交叉类型
    type Sister1 = {
        sex: number;
    }
    
    type Sister2 = {
        sex: string;
    }
    
    type SisterAn = Sister1 & Sister2;
    // 不报错，此时的 SisterAn 是一个'number & string'类型，也就是 never

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

## 最后 ##

欢迎关注「三分钟学前端」，回复「交流」自动加入前端三分钟进阶群，每日一道编程算法面试题（含解答），助力你成为更优秀的前端开发！

号内回复：

「**网络**」，自动获取三分钟学前端网络篇小书（90+页）

「**JS**」，自动获取三分钟学前端 JS 篇小书（120+页）

「**算法**」，自动获取 github 2.9k+ 的前端算法小书

「**面试**」，自动获取 github 23.2k+ 的前端面试小书

「**简历**」，自动获取程序员系列的 `120` 套模版

》》面试官也在看的前端面试资料《《

“在看和转发”就是最大的

[f4c67f219beb8f780dffec1702e7b46b.png]: /images/20220829/3f7506d1cd0745379800d44e282ed5c3.png