【Vue Mastery中英字幕】Intro to Vue 3 + TypeScript

Vue 3 + TypeScript 简介

讲师：Vue Msatery Team

双语IT资源独家Vue Mastery付费课程，独家中英文字幕，配套资料齐全！

用不到1/10的价格，即可享受同样的高品质课程，且可以完全拥有，随时随地都可以任意观看和分享。

为什么选择 Vue 和 TypeScript

Vue 3 中讨论的重要话题之一是围绕 TypeScript。然而，对于我们这些还没有跳上 TypeScript 火车的人来说，在将 TypeScript 添加到他们的代码库时会有很多犹豫是可以理解的。在本课中，我将解决其中一些问题，以帮助提供另一个视角来评估 Vue 和 TypeScript 是否适合您的项目。

定义TypeScript

首先，让我们花点时间了解一下 TypeScript 是什么。

来自TypeScript 网站，“TypeScript 是一种开源语言，它通过添加静态类型定义建立在 JavaScript 之上，JavaScript 是世界上最常用的工具之一。”

【Vue Mastery中英字幕】Intro to Vue 3 + TypeScript

在我们的按钮组件上查看了这个新的和改进的 props 版本之后，您现在可能已经意识到我们所做的是为我们的 props 分配一个“静态类型”。

换句话说，无论您是否意识到，您一直都在利用静态类型！

打字稿值得吗？

当然，虽然我们现在已经揭开了使用静态类型的神秘面纱，但仍然存在将 TypeScript 添加到您的代码库是否值得的问题。

虽然 TypeScript 在类型检查等方面确实有很多好处，就像我之前提到的那样，但要记住的关键是所有工具都有妥协和权衡。因此，如果我要向代码库添加额外的工具，我想确保它能解决我或我的团队遇到的特定问题。

在我看来，当一个团队几乎没有使用 TypeScript 的经验时，TypeScript 提供的代码库的价值最终归结为一件事：可扩展性。

可扩展性可以分为两个主要类别：

您的代码库有多大？
有多少用户在为你的代码库做贡献？

大型代码库

当我们看 Angular 时，它是一个高度自以为是的框架，主要是为企业公司设计的，他们强制使用 TypeScript 的决定值得考虑。

随着代码库规模的增长，这通常意味着最终使应用程序运行的移动部分变得更加复杂。因此，TypeScript 提供开发人员可以信任的可靠数据结构的能力对于团队的生产力至关重要。

这就是为什么许多公司发现自己投资于 TypeScript，因为它有助于为代码提供额外的文档层，否则如果原始贡献者离开公司并忘记向他们编写的代码添加注释，这些文档可能会丢失。

大量贡献者

另一方面，有些人在想，“我的应用程序很小，那么 TypeScript 对我有什么好处呢？”

对于这种情况下的人，如果您的应用程序有大量贡献者，TypeScript 尤其有用。最常见的情况是您维护一个开源项目。由于人们可以在任何给定时间为开源项目做出贡献，因此为贡献者提供结构和一致性的能力至关重要。

毕竟，除了确保代码库按预期工作之外，它还有一个额外的好处，即减少维护人员必须花在回答问题或解决 PR 上的时间，而这些问题本可以通过正确定义的类型来解决。

Vue 中的 TypeScript 支持怎么样？

人们在 Vue 2 中使用 TypeScript 时遇到的最大障碍之一是，虽然这在技术上是可行的，但入门成本相当高，而且有些东西并没有像他们想要的那样工作。例如，缺乏跨 Vuex 轻松检测类型的能力，人们必须做出各种妥协才能使其正常工作。

当听到这个消息时，许多人避免将 TypeScript 添加到他们的 Vue 项目中也就不足为奇了。对于那些不知道的人来说，Vue 3 完全是用 TypeScript 重写的。因此，开发人员可以期待未来对 TypeScript 的更好支持。因此，无论是 Vetur 等开发工具，还是 Router 和 Vuex 等库，使用 TypeScript 都会变得容易得多。因此，进入成本比以往任何时候都低。