TypeScript中Interfaces和Type Aliases的不同

305 阅读2分钟

学习typescript的过程中一直没有搞清楚这两个具体的不同,所以决定认真学习一下

官方解释

首先看的肯定是微软官方文做得解释: www.typescriptlang.org/docs/handbo…

解释比较简短,我直接截三张图抓其中重点

  • 第一句红线先说明了这两个很多时候差不多,只有一些微妙的差距

  • 第二句红线指出: interfaces创造了一个新的名字,并被用在了任何地方。而type aliases不会创建新的名字

  • 红线指出:只要可以,你应该总是使用interface(感觉最重要的一句话,也证明了平常的做法是对的)

  • 最后这句话指出,当你不能使用interface表达某些shape的时候,union或者tuple type一般是解决方法

Union Type(联合类型)和Tuple Type(元祖类型)

看到这里觉得有必要再加深下union和tuple type的理解

  1. Union Type

union type描述了一个值,这个值可以是多个类型中的一个

  1. Tuple Type
    tuple type容许你表达一个固定长度的数组,其中所有元素的类型是确定的

其他解释

medium.com/@martin_hot…

这篇文章说了一些interface可以做到,但是type alias做不到的地方,算是官方的补充。我就直接跳结论了

其中比较有意思的第四条,因为和我平常做法不太一样,所以单独写出来

interface存在declaration merging而type alias做不到,react组件中的Props/state不能被monkey-patch(猴子补丁),所以推荐使用type alias来处理react组件中的Props/state

Declaration Merging(合并声明)

因为官方文档在比较的时候没有提到,就再解释下 www.typescriptlang.org/docs/handbo…

同名interface声明会结合所有的成员形成一个

结语

本人主要还是关心平常开发时候的使用:

  • 按照官方说法,能用interface的尽量用interface,用不了的情况,使用例如union和tuple type解决
  • 但是也有大神指出,如果存在不能被monkey-patch的类型声明,尽量使用type alias

如果有大佬发现还有什么值得指出的,麻烦留言