Vue 3 + TypeScript 简介
讲师：Vue Msatery Team
口袋资源独家Vue Mastery付费课程，独家中英文字幕，配套资料齐全！
用不到1/10的价格，即可享受同样的高品质课程，且可以完全拥有，随时随地都可以任意观看和分享。
为什么选择 Vue 和 TypeScript
Vue 3 中讨论的重要话题之一是围绕 TypeScript。然而，对于我们这些还没有跳上 TypeScript 火车的人来说，在将 TypeScript 添加到他们的代码库时会有很多犹豫是可以理解的。在本课中，我将解决其中一些问题，以帮助提供另一个视角来评估 Vue 和 TypeScript 是否适合您的项目。
定义TypeScript
首先，让我们花点时间了解一下 TypeScript 是什么。
来自TypeScript 网站，“TypeScript 是一种开源语言，它通过添加静态类型定义建立在 JavaScript 之上，JavaScript 是世界上最常用的工具之一。”
如果您之前没有使用过静态类型，让我们来看一个名为 mysteryBox 的普通 JavaScript 变量。
默认情况下，JavaScript 是所谓的“动态类型”语言，这意味着可以为变量分配任何“类型”的值。这意味着我们的 mysteryBox 变量可以完全包含字符串、数字、布尔值、数组、对象或其他内容！
虽然这样做有很多好处，但缺点是很难预测某些东西应该（或不应该）如何表现。因此，如果我们有一个名为 的变量myAge，我们知道它应该始终是一个数字；但是在没有任何其他工具的情况下，我们检查这一点的唯一方法是在我们使用变量时始终添加条件语句myAge。
这就是静态类型具有很大价值的地方，因为它们永远不会改变并且是固定值，它们允许我们提前定义类型，因此我们可以相信像 myAge 这样的变量总是按照我们希望的方式运行。
话虽如此，让我们来看看将 TypeScript 添加到 Vue 项目的优缺点。
TypeScript 的成本
与您添加到代码库的任何其他依赖项一样，最大的成本通常是新开发人员使用新工具提高工作效率所需的学习曲线。随着越来越多的开发人员进入以 JavaScript 作为他们的第一语言的编程世界，这意味着有很多新的范例和东西需要学习，这对于期限紧迫的团队来说可能非常昂贵。
老实说，在代码库中使用 TypeScript 似乎不仅仅是添加一个库来处理应用程序的特定部分。毕竟，当我们听到大多数人谈论 TypeScript 时，他们的整个应用程序通常都是用它编写的，而且当我们大多数人甚至没有时间重构已经存在的技术债务时，很难想象花时间重写你的代码库！当然，即使人们将 TypeScript 添加到他们的代码库中，也不会突然间一切都好起来，他们的代码也不会突然没有错误。
与任何工具或技术一样，存在妥协和权衡，通常需要经验和教训才能使团队满意。听完所有这些之后，这里的问题是，这值得吗？
TypeScript 并没有你想象的那么可怕
许多人对 TypeScript 的第一个担忧是它给人的感觉不同和陌生。鉴于我们中的许多人都使用 JavaScript 的动态类型，学习一种新的语法和范例来理解我们如何定义和编写代码感觉很奇怪。然而，对于那些使用过 Vue 一点点的人来说，事实是您一直在使用类型的可能性非常高。不相信我？让我们深入研究一个组件。
这里我们有众所周知的按钮组件，它应该接收文本和背景颜色作为道具。
虽然我们中的许多人都是从在数组语法中定义 props 开始的，但我们在这里看到，我们大多数人转而使用对象语法来更好地定义我们的 props。
然后对于我们这些了解自定义验证器的人来说，我们通常更进一步添加自定义验证器以确保我们收到的组件接收到正确的数据。
在我们的按钮组件上查看了这个新的和改进的 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 都会变得容易得多。因此，进入成本比以往任何时候都低。
可以逐步添加 TypeScript
许多人的一个误解是 TypeScript 是全有或全无。毕竟，如果您要使用 TypeScript，难道不应该用它重写整个应用程序吗？事实是，这与事实相去甚远。换句话说，就像您可以通过放入 CDN 包以添加 Vue 功能来逐步将遗留应用程序迁移到 Vue 一样，TypeScript 也是如此。
因此，与其感到用 TypeScript 重写整个应用程序的压力，我建议您选择一个特定的功能，您将在其中使用 TypeScript 增强它，看看它对您的团队是否值得。如果你和/或团队看到了 TypeScript 的好处，那么继续慢慢地重构它是有意义的！
让我们重温
归根结底，TypeScript 可能不适合您的项目。如果是这样的话，那完全没问题！但是，如果 TypeScript 看起来可能在未来的项目中占有一席之地，那么请务必坚持下去，因为我们将深入研究在 Vue 中使用 TypeScript 的基础知识。
