从 JavaScript 迁移到 TypeScript

更新日期: 2022-02-17阅读: 1k标签: 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。这包括 reactangularvue 和 Svelte。框架 express.js 也与其他 Node.js 框架一样与 TypeScript 兼容。因此,确实没有什么能阻止您在应用程序的前端和后端使用 TypeScript。

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

如何学习 TypeScript

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

翻译来自:https://dev.to/andrewbaisden/moving-from-javascript-to-typescript-40ac

链接: https://fly63.com/article/detial/11199

用TypeScript弥补Elm和JavaScript之间的差距

近些日子,我使用了新语言编程,从JavaScript,切确地说是Elm,转成TypeScript。在本文中,我将继续深挖一些我非常喜欢的TypeScript特性。

Typescript 和 Javascript之间的区别

TypeScript 和 JavaScript 是目前项目开发中较为流行的两种脚本语言,我们已经熟知 TypeScript 是 JavaScript 的一个超集,但是 TypeScript 与 JavaScript 之间又有什么样的区别呢?

Nerv_一款类 React 前端框架,基于虚拟 DOM 技术的 JavaScript(TypeScript) 库

Nerv_是一款由京东凹凸实验室打造的类 React 前端框架,基于虚拟 DOM 技术的 JavaScript(TypeScript) 库。它基于React标准,提供了与 React 16 一致的使用方式与 API。

TypeScript_TS系列之高级类型

交叉类型:将多个类型合并为一个类型、联合类型:表示取值可以为多种类型中的一种、混合类型:一个例子就是,一个对象可以同时做为函数和对象使用,并带有额外的属性、类型断言:可以用来手动指定一个值的类型

TypeScript 在 JavaScript 的基础上的改动

在做比较大的,多人合作的项目的时候,TypeScript会更加地适合,这得益于它的可读性,面向对象性以及易于重构的特点。但如果只是自己做小程序,不需要太多人参与的时候,JavaScript则会更加简单。

5分钟了解TypeScript

有两种方式安装TypeScript,如何创建第一个TypeScript文件,在TypeScript中,可以使用interface来描述一个对象有firstName和lastName两个属性,TypeScript支持JavaScript的新功能,其中很重要的一个功能就是基于类的面向对象编程

如何编写 Typescript 声明文件

使用TypeScript已经有了一段时间,这的确是一个好东西,虽说在使用的过程中也发现了一些bug,不过都是些小问题,所以整体体验还是很不错的。有关TypeScript声明类型声明相关的目前就总结了这些比较常用的

谷歌为何会选用TypeScript?

谷歌在很早之前就张开双臂拥抱 Web 应用程序,Gmail 已经发布 14 年了。当时,JavaScript 的世界是疯狂的。Gmail 工程师不得不为 IE 糟糕的垃圾回收算法捏一把汗,他们需要手动将字符串文字从 for 循环中提取出来,以避免 GC 停顿

为什么要学习Typescript 语言呢?Typescript 开发环境安装

TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集,TypeScript是JavaScript类型的超集,它可以编译成纯JavaScript。TypeScript可以在任何浏览器、任何计算机和任何操作系统上运行,并且是开源的。

使用TypeScript两年后-值得吗?

差不多两年前,我在一个创业团队中开始了一个全新的项目。用到的全都是类似Microservices,docker,react,redux这些时髦的东西。我在前端技术方面积累了一些类似的经验

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!