来源 | https://dev.to/andrewbaisden/moving-from-javascript-to-typescript-40ac

介绍

扩展你的知识

疫情期间找工作

为什么你应该学习 TypeScript

JavaScript 与 TypeScript

编译错误

静态类型与动态类型

// This is valid JavaScript codelet 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 numberid: 1,// The series name needs to be a stringseriesName: 'The Book of Boba Fett',// The release data needs to be a numberreleaseDate: 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 expressconst 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/nodeimport 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。

总结

以上就是我对它们的一些理解与看法，希望能够帮助到您，如果您有什么问题，请在留言区给我留言，如果您觉得我的文章对您有帮助，请记得给我点赞，谢谢。

学习更多技能

请点击下方公众号