TypeScript 中的接口与类型别名——快速比较

对于任何使用 TypeScript 的人来说，无论是新手还是经验丰富的程序员，这都可能令人困惑。两种方法都能满足类似的需求。

本文将快速介绍 TypeScript 中哪些特性可以实现为类型别名或接口。为了便于理解，我力求简洁明了，使文章具有概览性。

👉总结：你不在乎每个细节上的差别？那你应该用哪个？

使用界面直到需要输入类型为止
——orta

概述：接口 (I) 与类型别名 (T)

基本元素

❌：接口
✅：类型别名

string并构成 TypeScript 中的基本类型number。boolean

延伸/相交

✅：接口
✅：类型别名

虽然接口别名和类型别名的交集和扩展并不完全相同，但为了方便举例，我将它们放在一起讨论。当类型键同时出现在你想要扩展或交集的两个类型中时，就会出现区别。

因此，如果扩展键或交叉键的类型不同：

• 类型别名允许你这样做，但会将该类型更改为never
• 接口抛出错误，提示类型不兼容。

映射对象类型

❌：接口
✅：类型别名

使用此方法在对象中输入键。

以下是一些它的实际应用：

• [key: string]仅允许使用字符串作为键
• [key: number]仅允许使用数字作为密钥
• [key in keyof T as `get${Capitalize<string & key>}`]仅允许以 `.` 开头的键get...，例如在 Getter 对象中看到的键。

工会

❌：接口
✅：类型别名

Typescript 的等效项OR：类型可以是 `T` x、`C` y、`D`z或任意多个类型。

扩充现有类型

✅：接口
❌：类型别名

jQuery您可以向已有的类型添加字段。当您向现有类型（例如）添加新字段（例如自动完成库）时，此功能非常有用window。

元组

✅：接口
✅：类型别名

如果你在 React 中使用过 Hooks，那么你就知道元组的用途了。

单个函数调用可以返回一个值和函数的数组，这些值和函数是解构的，可以用作完全类型的变量：const [name, setName] = useState('')

函数

✅：接口
✅：类型别名

函数可以使用参数类型和返回类型进行注释。

递归

✅：接口
✅：类型别名

递归使用起来很简单。请确保?为递归属性添加可选参数。否则，TS 编译器在查找无限递归时会报错。

更多资源

• TypeScript Playground
• React 中的类型或接口
• Mark 的《TypeScript 中的接口与类型》
• 莱昂纳多·马尔多纳多 (Leonardo Maldonado) 撰写的《TypeScript 中的类型与接口》
• Martin Hochel 撰写的《TypeScript 2.7 中的接口与类型别名》

如果您觉得这篇文章有趣，请在这条推文上点个赞❤️，并考虑在Twitter上关注我关于#webperf、#buildinpublic和#frontend等方面的🎢旅程。

Simon Wicki 是一位居住在柏林的自由开发者。曾在 JustWatch 参与 Web 和移动应用开发。精通 Vue、Angular、React 和 Ionic。热爱前端、技术、Web 性能优化和非虚构类书籍。

👉关注我的推特账号，获取我的最新动态。