亲宝软件园·资讯

展开

typescript type和interface区别

Mr_Carl 人气:0

前言

在typescript里面,有两个概念十分容易混淆,那便是 typeinterface,它俩都可以用来表示 接口,但是实际使用上会存在一些差异,因此本篇文章就准备聊聊它俩,彻底弄清它俩的联系与区别,废话不多说,开搞!

type和interface的相同点

在我看来,它俩就是对 接口定义 的两种不同形式,目的都是一样的,都是用来定义 对象 或者 函数 的形状,示例如下

    interface example {
        name: string
        age: number
    }
    interface exampleFunc {
        (name:string,age:number): void
    }
    
    
    type example = {
        name: string
        age: number
    }
    type example = (name:string,age:number) => void

它俩也支持 继承,并且不是独立的,而是可以 互相 继承,只是具体的形式稍有差别

    type exampleType1 = {
        name: string
    }
    interface exampleInterface1 {
        name: string
    }
    
    
    type exampleType2 = exampleType1 & {
        age: number
    }
    type exampleType2 = exampleInterface1 & {
        age: number
    }
    interface exampleInterface2 extends exampleType1 {
        age: number
    }
    interface exampleInterface2 extends exampleInterface1 {
        age: number
    }

可以看到对于interface来说,继承是通过 extends 实现的,而type的话是通过 & 来实现的,也可以叫做 交叉类型

type和interface的不同点

首先聊聊type可以做到,但interface不能做到的事情

接下来聊聊interface可以做到,但是type不可以做到的事情

结语

其实在typescript里,还有很多容易搞混淆的概念,如 extendsimplements 等,还有一些高级概念,如 泛型。这些都是在ts里必知必会的东西,因此一定要细抠这些知识点

ts给我们的代码带来健壮性的同时,也引入了更多的概念和知识,因此需要我们不断地学习。在今后我也准备多输出一些关于ts的文章,加深自己对于ts的理解,同时也可以帮助到喜欢看我文章的朋友,好啦,就写到这里啦,over!

如何选择 Interface 、 Type

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

大多数时候,对象类型的简单类型别名的作用与接口非常相似

interface Foo { prop: string }
 
type Bar = { prop: string };

但是,一旦你需要组合两个或多个类型来实现其他类型时,你就可以选择使用接口扩展这些类型,或者使用类型别名将它们交叉在一个中(交叉类型),这就是差异开始的时候。

出于这个原因,建议使用接口/扩展扩展类型而不是创建交叉类型。

- 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

总结

加载全部内容

相关教程
猜你喜欢
用户评论