乐趣区

关于javascript:从-JavaScript-迁移到-TypeScript

jiezi

介绍

我作为一名 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。

退出移动版