目录前言type和interface的相同点type和interface的不同点结语如何选择 Interface 、 Type总结前言 在typescript里面,有两个概念十分容易
在typescript里面,有两个概念十分容易混淆,那便是 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 myString = string
type myType = typeof someObj
type uNIOnType = myType1 | myType2
type yuanzu = [myType1, myType2]
接下来聊聊interface可以做到,但是type不可以做到的事情
interface可以 声明合并,示例如下
interface test {
name: string
}
interface test {
age: number
}
这种情况下,如果是type的话,就会是 覆盖 的效果,始终只有最后一个type生效
其实在typescript里,还有很多容易搞混淆的概念,如 extends 和 implements 等,还有一些高级概念,如 泛型。这些都是在ts里必知必会的东西,因此一定要细抠这些知识点
ts给我们的代码带来健壮性的同时,也引入了更多的概念和知识,因此需要我们不断地学习。在今后我也准备多输出一些关于ts的文章,加深自己对于ts的理解,同时也可以帮助到喜欢看我文章的朋友,好啦,就写到这里啦,over!
虽然 官方 中说几乎接口的所有特性都可以通过类型别名来实现,但建议优先选择接口,接口满足不了再使用类型别名,在 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
到此这篇关于typescript中type和interface区别的文章就介绍到这了,更多相关typescript type和interface区别内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: typescript中type和interface的区别有哪些
本文链接: https://www.lsjlt.com/news/138394.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0