首页 前端知识 Typesript的type和interface的异同?

Typesript的type和interface的异同?

2024-08-16 22:08:47 前端知识 前端哥 407 852 我要收藏

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

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/15793.html
标签
reactjs
评论
发布的文章

HTML5学习记录

2024-04-29 12:04:01

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!