从 JavaScript 迁移到 TypeScript

介绍

我作为一名 JavaScript 开发人员已经很多年了，我并没有太多打算跳出我的技术堆栈。我告诉自己，坚持你已经知道的东西和尝试学习太多的编程语言可能会让人望而生畏。

JavaScript 学习起来已经相当耗时，而且没有人真正掌握它，因为随着语言的发展，API 会随着文档的不断更新。还有很多框架和库要学习。

这是过时的想法，幸运的是我在找工作的间隙看到了曙光。公司正在寻找通晓多种语言的开发人员，这本质上意味着了解并能够使用多种编程语言的人。

扩展你的知识

那时我意识到 JavaScript 是不够的，如果你真的想脱颖而出，那么你需要能够使用不同的编程语言。所以当时我决定学习 TypeScript 和 Python。具有讽刺意味的是，我实际上设法找到了一份工作，但公司只要求我使用 JavaScript，所以不幸的是，我忘记了大部分我学到的 TypeScript 和 Python，因为我不是每天都使用它。

所有这一切都发生在我活跃在技术 Twitter 上和开始写博客之前，所以我真的不明白在公共场所建设和从事业余项目的概念。我的理由是我已经有了一份工作，所以我也不需要在周末进行编程。

疫情期间找工作

快进到 2021 年，一切都变了。我们现在正处于与 Covid 一起生活在这场全球大流行病中的第二年。我花了大约 6 个月的时间才得到一份体面的工作机会，从那时起我就一直在这家公司工作。在此期间，我参与了具有 Python 和 Kotlin 后端的项目。所以我接触到了不同的语言。

JavaScript 仍然是世界上最流行的编程语言之一，并且总是会有很高的需求。它在Stackoverflow 2021 调查中名列前茅，而 TypeScript 排名第 7。因此，如果 JavaScript 在世界范围内如此流行和备受追捧，为什么还要学习 TypeScript？

为什么你应该学习 TypeScript

与 JavaScript 一样优秀的是，与其他现代编程语言相比，该语言仍然存在许多缺陷。不幸的是，有很多人出于各种原因直接不喜欢 JavaScript。

TypeScript 基本上是一种开发 JavaScript 项目的现代方式，并且该语言编译为原始 JavaScript，因此您的代码库仍然可以被浏览器和其他可能不知道 TypeScript 的开发人员读取。老实说，语法是 JavaScript，所以即使你不熟悉 TypeScript，你仍然可以理解发生了什么。

TypeScript 旨在解决 JavaScript 存在的许多问题，这使得该语言更接近于其他现代编程语言。在我看来，任何讨厌 JavaScript 的人都可能会爱上 TypeScript。或者至少找到更少的理由来抱怨它。

JavaScript 与 TypeScript

两者之间有很多差异，我将在这里介绍其中的一些。

编译错误

TypeScript 能够在开发过程中标记编译时的错误。这是一个非常好的功能，因为它意味着当您的应用程序已构建并正在运行时，您不太可能在运行时出错。JavaScript 只能在运行时看到这些错误，因此您很可能会进行更慢的调试，因为您现在正在进行更多不必要的检查。TypeScript 中可用的更好工具在编写代码时提供了更好的体验。

静态类型与动态类型

JavaScript 使用动态类型，而 TypeScript 使用静态类型。使用动态类型，您可以重新分配变量，因为数据类型可以更改。这在静态类型中是不可能的，因为定义了数据类型意味着如果您尝试分配不同的数据类型，它将显示编译错误。每种方法都有优点和缺点。

// This is valid JavaScript code
let num = 10;
num = "10";

// You will get the error Type 'string' is not assignable to type 'number'.
let num: number = 10;
num = "10";

使用接口描述您的数据

TypeScript 可以在代码中使用一个接口，该接口几乎描述了应用程序中对象的结构。它定义了对象所需的整体语法，因此您可以将其用于代码编辑器内的文档和问题跟踪。

值得注意的是，TypeScript 编译器不会将接口语法转换为 JavaScript。它仅用于类型检查，也称为“鸭子类型”或“结构子类型”。

// Describe the shape of objects in your code.
interface Series {
id: number;
seriesName: string;
releaseDate: number;
}

// Use the interface for type checking in your object.
const series: Series = {
// The id needs to be a number
id: 1,
// The series name needs to be a string
seriesName: 'The Book of Boba Fett',
// The release data needs to be a number
releaseDate: 2021,
};

console.log(series);

CommonJS 模块与 ES 模块

Node.js 默认使用 CommonJS 模块，任何熟悉它的人都会知道require语法。相比之下，当您将 Node.js 与 TypeScript 一起使用时，您可以选择使用requireorimport和export语句。当然，如果您进行研究，也有办法让它在原生 JavaScript 中运行。

JavaScript CommonJS 模块

const express = require('express');

TypeScript ES 模块

import express from 'express';

使用 TypeScript 时，您可以访问一个tsconfig.json文件，该文件允许您更改许多设置，其中包括target. 这使您可以为输出的 JavaScript 文件设置 JavaScript 语言版本。例如，它们可以是 ES2015、ES2016、ES2017 等......

TypeScript缺点

TypeScript 非常棒，但它确实有一些你应该注意的缺点。首先，TypeScript 在浏览器中不起作用，因此您必须先将代码编译为 JavaScript，然后才能使用它。

幸运的是 TypeScript 有一个编译器，所以当你设置好它时，它会自动将你的 TypeScript 文件编译为 JavaScript，幸运的是这是一个快速的过程。因此，您不必担心必须等待几分钟才能让您的代码编译该过程通常在几秒钟内完成。

另一个缺点是您将编写更多代码，特别是如果您想要进行静态类型检查。不过，我并不认为这是一个缺点，因为您正在编写更高性能和更好的代码，这将使其更易于维护。

您需要知道的另一件事是，除了您使用的一些普通包之外，您还需要一些类型声明包。类型声明包描述内置对象。声明文件为您提供了一种声明类型或值的方法，因此无需为这些值提供任何类型的实现。

情况并非总是如此，因为一些包已经有类型定义，但不是全部。在下面的这个 Express Node.js 示例中更容易理解。

JavaScript Express 应用程序

npm i express

const express = require('express');

const app = express();

app.get('/', (req, res) => {

res.send('Home Route');

});

const port = process.env.PORT || 3000;

app.listen(port, () => console.log(`Server running on port ${port}, http://localhost:${port}`));

TypeScript Express 应用程序

npm i express @types/express @types/node

import express, { Response, Request } from 'express';

const app = express();

app.get('/', (req: Request, res: Response) => {

res.send('Home Route');

});

const port = process.env.PORT || 3000;

app.listen(port, () => console.log(`Server running on port ${port}, http://localhost:${port}`));

TypeScript支持

TypeScript 得到很好的支持，如果您选择的代码编辑器是 Visual Studio Code，那么 TypeScript 被视为一等公民，因为 Microsoft 开发了代码编辑器和语言。

几乎所有流行的 JavaScript 框架也都支持 TypeScript。这包括 React、Angular、Vue 和 Svelte。框架 express.js 也与其他 Node.js 框架一样与 TypeScript 兼容。因此，确实没有什么能阻止您在应用程序的前端和后端使用 TypeScript。

另一个优点是您现在可以在后端和前端本地使用 ES 模块。因此，例如，如果您正在创建一个具有 Node 后端和 React 前端的应用程序。您现在可以对两者都使用import和export语句，并且不再需要使用 CommonJS 模块 require语句。

如何学习 TypeScript

我从 Scrimba 学习了 TypeScript，并且还学习了 Udemy 上的另一门很好的 TypeScript 课程。如果您已经了解 JavaScript，那么您很快就会熟悉 TypeScript。此外，如果您是 JavaScript 新手或仍在学习基础知识，那么最好等到您对它有更多经验后再学习 TypeScript。