详解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时,如果定义了同名的属性,则会导致编译错误)