TypeScript 如何让 React 变得更好：更流畅的开发者体验，更少的错误（以 useState 为例）

让我们从一个场景和与之相关的任务开始。

我们有一个带有状态栏的消息应用程序，可以显示用户的当前状态并允许他们更新它。我们必须添加一个下拉菜单，用户可以从中更改其状态，并使用 useState() 在 UI 中显示和更新用户的当前状态。

为了简单起见，我们在本文中仅关注 useState 实现，在本文结束时，您将了解即使对于一个简单的示例，TypeScript 也是一个更强大的选项。

任务

我们必须定义一个 useState() 来存储和更新 userStatus，并使用五个可能的状态选项之一进行初始化（假设 active）。

所有可能的选项是：

1. 活跃（活跃）
2. 离开（离开）
3. 请勿打扰（dnd）
4. 请假（请假）
5. 外出 (OOO)

JSX/JS

这是一个非常简单的任务，对吧？我们所要做的就是定义一个 useState 并将其初始化为 active，然后使用 set 函数更新状态，我们就完成了。

但是等等！当有人审查我的代码或稍后访问这段代码时（例如 1 周、2 周、1 个月、6 个月或其他时间后）会发生什么，他们如何知道所有可能/有效的选项是什么？

啊啊！是的，我们可以在 useState 旁边添加注释，让他们知道这些都是可能的选项。

但是，这不是一个好的解决方案，对吧？那么，我们该如何改进呢？

对象查找

对象查找对于我们的问题来说是一个非常好的解决方案。因此，让我们从定义一个名为 UserStatus 的对象查找开始，并使用它来设置我们的 userStatus 值。

现在，让我们更新 useState 定义。

现在，让我们尝试更新状态。

哦！看看，现在我们在编辑器中获得了自动完成功能，并且可以通过查看 UserStatus 的定义来检查 userStatus 的所有可能/有效值。

对象查找的问题

尽管对象查找方法似乎已经解决了我们的问题，并且绝对是比仅添加注释更好的解决方案，但它仍然存在两个主要问题：

1. 对于以后访问我们的代码的任何人，他们必须知道我们正在使用对象查找来设置我们的状态。这可能看起来微不足道，但想象一下，随着我们的组件增长并变得更加复杂，那么有人很容易不知道我们的实现。
2. 它仍然不能阻止任何人为我们的状态设置任何随机值，即使他们知道对象查找。  

那么，我们该如何解决这些问题呢？
答案：打字稿

多伦多证券交易所/TS

让我们重新开始我们的解决方案，但这次是在 .tsx 或 Typescript 文件中。我们可以首先定义一个 useState() 函数并使用值对其进行初始化：active。

现在看起来没有什么不同，但事实确实如此。让我们更新 userStatus 值。

啊啊！正如您所看到的，它在一些设置函数周围给了我们可怕的红色波浪线错误线，但在我们设置字符串值的函数上却没有。这是因为 Typescript 从初始值（即字符串类型）推断我们状态的类型。

是的，这将阻止我们为 userStatus 状态设置任何非字符串值，但它仍然不会阻止我们设置任何随机字符串值，并且我们仍然必须使用对象查找来记录所有可能的选项，你可能会问。
 

让我们来做一些“一石二鸟”。

显式类型和泛型

在 Typescript 中，我们可以创建 自定义类型，它还支持 泛型，它可以在 React 中用于其钩子定义，在我们的例子中是 useState() 钩子。

让我们在 React 组件中创建一个新的 UserStatus 类型。

现在，让我们在 useState 定义中使用此类型。

到目前为止，一切看起来都与我们在对象查找方法中所做的类似，但 Typescript 的神奇之处在于我们开始使用 set 函数和状态值。

1. 获取 userStatus 的类型定义。
   

2. setUserStatus 函数的自动完成。
   

3. 对有效值和无效值进行正确验证。
   

看那个，

1. 我们只需将鼠标悬停在 userStatus 上并查找其类型定义即可获取所有有效值的文档。
2. 但是，在使用 set 函数时，我们不需要查看状态值的类型定义，因为它会自动为我们提供所有有效选项的自动完成功能。
3. 现在，它不仅会在设置非字符串值时给我们带来错误，还会给我们使用无效字符串值带来错误（即，它总是会因无效输入而给出错误）。

结论

现在，您可能已经很好地感受到了 TypeScript 如何真正增强我们的开发体验。我们在这里仅通过一个简单的示例触及了表面，但想想我们正在构建的实际应用程序，使用 TypeScript 可能意味着更少的错误和更好的开发人员整体体验。

我希望这篇文章能够鼓励您开始在所有 React 应用程序中使用 Typescript 并构建出色的 Web 体验。

如果您喜欢这篇文章并想联系我，那么您可以在 Linked 和 X/Twitter 上与我联系

以上是TypeScript 如何让 React 变得更好：更流畅的开发者体验，更少的错误（以 useState 为例）的详细内容。更多信息请关注PHP中文网其他相关文章！