什么是 TypeScript 以及为什么你应该在 2020 年使用它

动态类型与静态类型

什么是 TypeScript

为什么你需要在 2020 年使用 TypeScript

使用 TypeScript 的缺点

如今，JavaScript 已成为几乎所有网站都在使用的流行编程语言。TypeScript 的第一个稳定版本于 2014 年发布，我认为它将成为年底的一大趋势。探索它的优缺点，以及何时使用它！

我的开发者故事

当我开始学习编程时，我主要使用 C 和 C++ 等语言，而对我来说，JavaScript 中缺少的功能之一就是类型。如果您不知道什么是类型，或者不知道动态类型和静态类型之间的区别，请不要担心；我将在本文的下一部分向您介绍这些概念。

几个月前，尽管我还在读硕士学位的最后一年，但我以全栈 JavaScript 开发人员的身份加入了巴黎的一家初创公司，同时我开始使用 TypeScript。

感谢 Typescript，让我找回了像使用 C++ 那样使用严格而精确的语言进行开发的感觉。
你可能想知道为什么我认为使用类型至关重要？我会在这篇文章中解释这一切。

动态类型与静态类型

在进一步了解 TypeScript 之前，你需要了解动态类型和静态类型之间的区别。你可能已经知道，编程时每个变量都是有类型的。
代码就像人一样，需要给某种类型的数据（数字、字符等）命名。

动态类型被认为是最容易编写的，因为所使用的编程语言将推断出变量中包含什么样的数据。

注意：您会在 Javascript 和 Python 等语言中发现这种类型。

const my_number = 0 // Javascript will deduce that my_number is a number
const my_string = “Hello, and welcome on HereWeCode!” // Javascript will deduce that my_text is a string

与动态类型相反，当您使用具有静态类型的编程语言时，您需要直接在代码中编写类型。

注意：您会在 C、C++、Java 等语言中发现这种类型。

const my_number: number = 0
const my_string: string = “Hello, and welcome on HereWeCode!”

什么是 TypeScript

TypeScript 是由微软开发和维护的一门开源编程语言。
顾名思义，TypeScript 为 JavaScript 添加了静态类型功能。
它被视为 JavaScript 的超集，因为它为 JavaScript 添加了新功能。作为超集，所有 JavaScript 程序也都是有效的 TypeScript 程序。
您可以使用 TypeScript 开发前端应用程序和后端应用程序。它与 Vue.js、React.js、Node.js 等框架非常契合。

为什么你需要在 2020 年使用 TypeScript

了解将 Javascript 代码转换为 Typescript 的优点列表。

• 运行时不再显示错误。您是否注意到，在使用 JavaScript 编程时，错误会在运行中（代码执行期间）出现？例如，当您点击按钮时，代码会一直执行，直到在特定行出现错误。当您使用类型化语言时，所有类型都会在编译时进行检查。在运行代码之前，编译器会检查并显示错误（如果有问题）。这可以节省您大量时间，并帮助您避免潜在的崩溃或错误。
• 随时开始。TypeScript可以读取 JavaScript 文件，您无需重写所有代码即可使用它。您可以逐个文件进行操作，直到项目完全转换完成。
• 更易读的代码。在我看来，这是使用 TypeScript 最重要的优点。有了类型，你可以通过提高代码质量来更有效地理解代码。一切都将清晰明了，你无需console.log费心就能知道变量里面的内容。
• 重构变得更加简单。同时，通过提高代码的可读性，您将能够更轻松地进行修改。使用动态类型时，有时可能需要花费大量时间才能深入了解所更改的代码。
• 更好的 IDE 支持。由于您在代码中提供了更多信息，IDE（WebStorm、Visual Studio Code 等）可以为您提供更好的支持，例如代码导航、自动完成、错误标记等。
• 提升你的编程技能。通过使用这种超集，你将深入了解你的代码，并可能学习到新的编程概念。我真诚地认为，在 2020 年，能够使用类型进行编程将对你的职业生涯大有裨益。

使用 TypeScript 的缺点

发现将 Javascript 代码转换为 Typescript 的缺点列表。

• 另一个需要学习的 JavaScript 工具。JavaScript环境非常庞大（框架、库等等），即使 TypeScript 与之非常相似，你也需要投入时间才能充分利用它。
• 开发时间更长。用 TypeScript 编程不如用 JavaScript 快。当我们谈论使用新技术时，我认为重要的是要明确何时使用它或何时不使用它。对于 TypeScript，你会发现在大型项目中使用它的好处，但在小型项目中却不一定如此。如果你只用几行 JavaScript 创建一个网站，那么切换到 TypeScript 并不值得，除非你想学习它。
• 静态类型有时会很奇怪。由于 TypeScript 是 JavaScript 的超集，代码会被转换为 JavaScript。这意味着编译器会自动将你编写的所有 TypeScript 代码转换为 JavaScript。因此，你可能会遇到一些类型错误。但这与不使用类型时可能犯的错误相比，根本不算什么。

关于类型的简短练习

现在您对什么是 Typescript 以及为什么应该在 2020 年使用类型有了更好的了解，我创建了一个快速活动来向您展示它如何有助于更快地理解代码。

您之前需要了解的一些提示和细节：

• string：字符列表，通常是一个句子
• 数字：所有类型的数字
• 数组：某个对象的列表（在我们的例子中，在 <...> 之间指定）

现在轮到你了；试着理解下面的代码。你需要确定列表中的内容，以及每个列表元素的结构。

interface Car {
  licencePlate: string;
  colour: string;
  nbSeats: number;
}

const myList = Array<Car>();

答：在这段代码中，我们有一个名为Car的结构体，其中包含三个变量（licencePlate 、 colour 和 nbSeats）。通过阅读代码，我们可以理解licencePlate和 colour 始终是一个字符串（字符列表），而nbSeats始终是一个数字。现在我们对Car 的
结构 体有了大致的了解；我们可以看到，开发人员想要创建一个变量my_list，其中包含一个 Car 列表（列表中的每个元素都是一辆车）。

这种练习的有趣之处在于，即使我们第一次看到代码，并且从未执行过，我们也掌握了大量关于代码结构关键细节的信息。
尽管这仍然是一个简短的代码示例，但我还是想让大家想象一下，在像 Spotify 这样的大型软件公司中，使用类型在数千行代码中会发挥多么强大的作用。

如果您想要更多类似的内容，您可以在 Twitter 上关注我，我会在那里发布有关 Web 开发、自我提升以及我作为全栈开发人员的历程的推文！