TS中interface和type的区别

·  阅读 1719
TS中interface和type的区别

「这是我参与2022首次更文挑战的第21天,活动详情查看:2022首次更文挑战」。

前言

之前有说过接口👉interface 和 类型别名👉type。会发现它们两个非常的像,interface 能做的,type 好像也能实现。

例如:两者都可以用来描述对象的类型。

image-20220220164545836

定义的不同

那什么时候用哪个呢?我们先从定义来看一下它们的区别:

interface:接口,TS 设计出来主要用于定义【对象类型】,可以对【对象】的形状进行描述。

type :类型别名,为类型创建一个新名称。它并不是一个类型,只是一个别名。

类型别名可以起到类似接口的作用。但是,有一些细微的差别。主要区别在于 type 一旦定义就不能再添加新的属性,而 interface 总是可扩展的。

使用的区别

从使用上,它们也有分别独有的能力。

interface

接口可以重复声明,TS会将它们合并。

image-20220220173447328

如果是type,重复声明会报错

image-20220220173612935

type

可以定义基本类型别名,如type StringType = string

image-20220220190752984

可以声明联合类型,如 type paramType = number | string;

image-20220220191902643

联合类型(Union Types),表示取值可以为多种类型中的一种。使用 | 分隔每个类型。

这里的 string | number 的含义是,允许param的类型是 string 或者 number,但是不能是其他类型。

可以声明元组类型,如type arrType = [string, string, number];

image-20220220193840612

元组 Tuple,元组类型允许标示一个已知元素数量和类型的数组,各元素的类型不必相同。

总结

1、如果需要被 extends 或者 implements, 则尽量使用接口

2、如果需要使用联合类型或者元组类型,类型别名会更合适。

3、如果是定义对象或函数,则都可以。

4、如果实在不想选择的话,就能用interface实现,用interface,如果不能就用type。

参考资料:

Type Aliases文档

接口 vs. 类型别名


🎨【点赞】【关注】不迷路,更多前端干货等你解锁

往期推荐

👉 一起来看看JS的原型继承

👉 JS中的getter和setter你会用吗?

👉 深入理解ES6箭头对象

👉 JS的装饰器模式实例分析

分类:
前端
收藏成功!
已添加到「」, 点击更改