为什么 2021 年应该使用 TypeScript 而不是 JavaScript | 一个简单的例子

本文最初发布于DoableDanny.com

简介

我最近正在使用 React Native 制作一款名为“ Atomic Meditation ”的冥想应用程序，最终发现了一个强有力的理由开始学习和使用 TypeScript 而不是 JavaScript 来完成中型到大型项目。

在开始之前，我需要说明一下，即使你以前从未使用过 React Native，你仍然可以阅读本文。我会在讲解过程中解释具体内容。此外，如果你使用过 ReactJS，那么就本文而言，React Native 和 React Native 是完全一样的！

让我向您展示普通的旧 JavaScript 如何让我陷入困境......

第 1 天 – 一切顺利

React Native 中有一种叫做 Async Storage 的东西，它可以非常简单地让你将数据永久存储在用户的手机中。

例如

AsyncStorage.setItem("@key", value)

异步存储仅允许您存储字符串，因此要保存数字，您必须先将其转换为字符串。

下面，我们使用 ReactJS useState 钩子来声明一个名为 sessionCount 的变量并将其初始状态设置为 0，并使用 setSessionCount 函数来改变 sessionCount 的状态。

const [sessionCount, setSessionCount] = useState(0)

假设用户完成了一次冥想课程（回想一下，我正在开发一款冥想应用），并且sessionCount正在记录我们的用户（我现在将他称为“焦虑的安迪”）完成的冥想课程总数。现在我们需要将 加 1。sessionCount因此，setSessionCount被调用，并将 1 加到之前的值上。然后，我们必须将这些数据保存为字符串。

我们将在一个函数中完成所有这些操作，我们称之为saveData：

// User completes a meditation…
const saveData = () => {
  setSessionCount(prev => {
    const newSessionCount = prev + 1

    AsyncStorage.setItem("@my_number", newSessionCount.toString())

    return newSessionCount
  })
}

一切进展顺利，安迪不再那么焦虑，而是平静地关闭了应用程序，感觉更加幸福。

第二天 — 暴风雨前的宁静

焦虑的安迪收到一条通知，提醒他5分钟后是冥想时间。但他迫不及待地想去，于是径直回到房间，拉出办公椅，舒服地坐下（但保持警觉），然后打开了他的“原子冥想”应用。

现在，当应用加载时，需要从存储中获取 Andy 的会话数据。在 React 中， useEffect 钩子允许我们在组件挂载后执行回调函数。

在回调函数中，我们异步从存储中获取数据，然后将SessionCount设置为我们返回的数据（“1”）。

例如

useEffect(() => {
  AsyncStorage.getItem("@my_number").then(data => setSessionCount(data))
}, [])

现在焦虑的安迪成功完成了另一次冥想，因此需要在 sessionCount 中添加 1 来跟踪他完成的总冥想次数。

这个新值也会永久保存到存储器中——就像以前一样。

例如

// User completes a meditation...
const saveData = () => {
  setSessionCount(prev => {
    const newSessionCount = prev + 1

    AsyncStorage.setItem("@my_number", newSessionCount.toString())

    return newSessionCount
  })
}

用户目前已完成2次冥想课程。

第三天 – 风暴

不再焦虑的安迪拿出手机并打开应用程序，开始他的第三次连续训练（他做得很好）。

他想看看自己做得怎么样，于是打开了数据界面。“哦，好多有趣的数据啊！”他自言自语道。“这应用太棒了！”

但他对这款应用的喜爱很快就消退了……

应用程序显示他已完成 11 节课程。但他只完成了 2 节！

哪里出了问题

在第 1 天，我们最初将其设置sessionCount为 0（一个数字）。

用户完成了冥想，因此我们加了 1。然后我们将其转换为字符串“1”，并将其保存到异步存储（回想一下，异步存储只接受字符串）。

在第 2 天，我们从异步存储中检索会话计数并setSessionCount获取收到的值“1”（一个字符串）。

用户完成了一次冥想，所以我们将 加 1。sessionCount但是在 JavaScript 中，“1” + 1 是“11”，而不是 2。

我们忘记将从存储中获取的数据转换回整数。

最糟糕的是，我们的程序没有标记任何错误，这个bug竟然被轻易忽视，给我们带来了后续的麻烦。像这样的问题，找到根源可真难！

JavaScript 允许我们在整个程序中自由地、不知不觉地改变变量的数据类型。

解决方案 – TypeScript

什么是 TypeScript？

如果你不熟悉 TypeScript，它本质上就是 JavaScript，只不过增加了一些超能力。变量不能改变类型——如果改变了，TypeScript 会抛出错误。

浏览器无法理解 TypeScript，因此所有 TypeScript 文件都会被编译成 JavaScript 文件（或单个“捆绑”JS 文件）。

如何在 React Native 中使用 TypeScript

将 TypeScript 添加到现有的 React Native 项目很容易 - 只需 npm 安装和几个配置文件即可完成！

现在我要做的就是将我的文件从 App.js 更改为 App.tsx 以获得自动类型检查。

一旦文件扩展名发生更改，TypeScript 就会抛出一个摇摆器（英语俚语，意为发脾气），告诉我sessionCount我初始化为数字类型的变量被分配给了字符串：

我现在必须执行检查以确保数据不为空，然后将该数据从字符串转换为数字（使用 parseInt）以消除错误：

useEffect(() => {
  AsyncStorage.getItem("@my_number").then(data => {
    if (data) {
      setSessionCount(parseInt(data))
    }
  })
}, [])

TypeScript 迫使我们编写更好、更健壮的代码。太棒了！

学习 TypeScript 的最佳资源

我通过关注The Net Ninja 的 TypeScript 系列学习了 TypeScript 。

如果我需要学习一门新的语言或框架，我首先会主动联系网络忍者看看他有没有写过这方面的系列文章。他太棒了！

此外，官方的 TypeScript 文档也非常好。

结论

现在我们可以稍微安心一点了，因为我们知道变量在整个程序中不能随意改变类型。感谢 TypeScript。

注意： JavaScript 仍然非常适合小型项目。但对于中大型项目，或者具有扩展潜力的小型项目，TypeScript 可能是一项值得的投资。如果你了解 JavaScript，学习 TypeScript 并不难。

如果您喜欢这篇文章，不妨试试我的“原子冥想”应用，表达您的谢意。冥想是静心冥想、消除焦虑的好方法。这款应用的灵感源自畅销书《原子习惯》，旨在帮助用户每天至少进行2分钟的冥想，从而养成每日冥想的习惯。如果您喜欢它，请给我留言，它会对您有所帮助！

祝你有美好的一天 ：）