详解TypeScript中type与interface的区别_javascript技巧_脚本之家

一、相同的地方

     1、都可以用来定义对象，描述函数

我们在用typescript开发的时候经常要用到数据类型定义，比如我们写一个接口或者函数的时候定义传参数据类型及字段等。这样子方便知道这个接口可以传什么参数，什么类型，便于后续维护和开发。

（1）定义对象

（2）定义常量

      2、都具有可拓展性，都可以用来扩展其他类型

      a)使用interface可以定义一个对象的结构和属性，并且可以进行继承和实现

b)使用type可以定义一个已有类型的别名，也可以进行交叉和联合类型的组合

c)type还可以拓展其他类型，如基本类型、函数类型、数组类型等

ID是一个类型别名，可以是字符串或数字类型。Greeting是一个函数类型，接受一个字符串参数并返回字符串类型。Coordinate是一个数组类型，包含两个数值类型的元素。User是一个对象类型，包含id、name、age等属性，并且属性的类型是通过type拓展得到的。

二、不同点

     1、type 可以定义基本类型、联合类型、交叉类型，还可以进行类型运算，而interface主要用来定义对象的结构。

     2、interface 可以被类实现(implement)，而type不行。

我们定义了一个接口Animal，它有一个name属性、一个sound属性和一个speak方法。然后，我们创建了一个类Dog，它实现了Animal接口。类Dog通过实现Animal接口，必须实现接口中定义的所有属性和方法。在类Dog中，我们定义了一个name属性和一个sound属性，并实现了speak方法。最后，我们创建了一个Dog的实例myDog，并调用了speak方法来表达狗的声音

     3、interface 支持声明合并，而type不支持。在同一个作用域内，使用相同的名称定义多个interface，会自动合并成一个。

     例子如下：

         我们先定义了一个名为 Person 的 interface，包含 name 和 age 属性。然后，在同一个作用域内再次定义了一个名为 Person 的 interface，包含 gender 属性。这两个 interface 会自动合并成一个。

       合并后的 Person interface 的类型为 { name: string; age: number; gender: string; }。我们可以使用这个合并后的 interface 来声明一个变量 p，并给它赋值一个对象，对象符合合并后的类型定义。

       注意，合并只会发生在两个具有相同名称的 interface 定义之间，其他类型定义（如 type 和 class）之间是不会发生合并的。

     4、interface 更推荐用于描述对象的结构，type 更适用于创建类型别名。

     5、使用interface时，如果定义了同名的属性，会进行属性合并；而使用type时，如果定义了同名的属性，会报错。

    a) interface

      例子如下：接口A和B都定义了同名的属性name。当我们通过接口AB继承A和B时，会进行属性合并，最终合并后的接口AB将具有name、age、gender和nationality这些属性。

不过需要注意的是，如果在合并后的接口中，同名属性的类型不一致，TypeScript会报错

b) type（使用type时，如果定义了同名的属性，则会导致编译错误）