JavaScript转TypeScript:逐步迁移指南

发表时间: 2022-11-27 15:44

JavaScript是前端开发非常常用的语言。这几年,很多框架都采用TypeScript替代JavaScript作为开发语言,也有很多专家建议使用TypeScript。

我们从开发运行等不同角度来看看,这两门语言的差异和联系,从而为我们日常使用做出更好的判断。

特性介绍

首先,分别看看JavaScript和TypeScript这两门语言,以及各自的优势。

JavaScript

JavaScript 是一种轻量级的解释性脚本语言,可嵌入到 HTML 页面中,在浏览器端执行,能够实现浏览器端丰富的交互功能,为用户带来流畅多样的用户体验。

运行角度,JavaScript有着无与伦比的优势:

  • JavaScript是主流浏览器都支持、且唯一一种脚本语言。
  • JavaScript 语言具有动态性。JavaScirpt可以操作网页Dom,实现各种动态效果。所有网页动态效果都依赖JavaScript
  • JavaScript 是事件驱动的,能够根据用户的操作做出相应的反应处理。
  • JavaScript无需编译,只要嵌入 HTML 代码中,就能由浏览器逐行加载解释执行。
  • 浏览器对JavaScript做了大量安全机制设定,确保JavaScript脚本仅在浏览器端执行,不会访问本地硬盘数据。

开发角度,JavaScript也有着独特优势:

  • JavaScript 的语法简单,使用的变量为弱类型。容易上手。
  • JavaScript 是一种基于对象的语言,可以创建对象同时使用现有对象。但是Javascript 并不支持其它面向对象语言所具有的继承和重载功能。
  • JavaScript和其他脚本语言一样,不需要编译即可运行。
  • Node.js出现之后,让JavaScript脱离浏览器调试、运行、优化,极大提升了JavaScript开发系统性,为大型前端系统开发提供了可能。
  • JavaScript有着非常丰富的开源、免费生态,省去大量开发成本。(脚本语言中,仅Python也具备丰富生态)

TypeScript

TypeScript 是 Microsoft 开发和维护的一种面向对象的编程语言

  • 它是 Microsoft 推出的开源语言,使用 Apache 授权协议
  • 它是 JavaScript 的超集,包含了 JavaScript 的所有元素,并扩展了 JavaScript 的语法。
  • 它可以载入JavaScript代码,无缝使用JavaScript。
  • 它增加了类型系统,包括静态类型、类、模块、接口和类型注解等。

相比于JavaScript,TypeScript的优势主要体现在:

1.拥有类型系统,更适合大型工程的规范开发。

  • 类型系统可在编译阶段发现大部分的错误。
  • 类型系统也是一个很直观的编程文档,可以查看任何函数或API的输入输出类型
  • 类型系统增强了编辑器或IDE的功能
  • TypeScript 可以自动地推导类型

rollbar统计了前端项目错误的Top10,基本都是类型错误。TypeScript 的类型系统,能较好地预防这类问题。

2.兼容和复用JavaScript,省去大量学习和再造成本。

  • 涵盖了JavaScript,TypeScript降低了迁移和使用成本。
  • TypeScript 拥抱 ES2015 以及 ESNext 草案规范
  • 几乎第三方库都有 TypeScript 类型定义文件

对比分析

接下来,从几个不同的角度,由浅入深地看看两种语言的差异。

使用场景

JavaScript:开发语言、运行语言;

TypeScript:开发语言(编译为JavaScript)

框架支持

JavaScript: 原生JS、Vue 2、React

TypeScript:Angular、Vue 3

框架,也会用JSX等类似模板的方式,将HTML、CSS和JS/TS组合在一起使用,更好地优化代码架构,提升开发效率

语法角度

从语法角度理解一门开发语言,根本依据是其规范标准。

ECMAScript就是JavaScript遵循的语言规范,而JavaScript是ECMAScript的一个主流实现。一般意义上可以认为 ECMAScript = JavaScript;

TypeScript也兼容ECMAScript规范,所以TypeScript是JavaScript的超集。

网上介绍得很多,但依然不好理解,容易搞晕。出现这种情况是因为,ECMAScript规范一直在更新,有很多版本,比如ES6(ES2015)就是一个标志性的版本。

实现角度

一门语言,需要开发环境和运行环境的支持。

对工程师来说,只需要知晓一门语言在开发环境和运行环境中的实际支持情况,就可以很好地工作了。

无论JavaScript/TypeScript,在浏览器运行环境中运行的都是JavaScript。浏览器上,只需要看JavaScript引擎对ECMAScript语法规范的支持情况。

以ES6为例,目前主流浏览器的最新版本都支持了。

开发环境,一般都是Node.js。Node.js各版本对ES6的支持情况

开发过程中,可以使用ESLint作为语法检查工具。

开发实践

最后,从开发实践角度,简单地看看二者如何入手。

开发环境搭建

目前主流的前端开发环境都是基于Node.js的,需要先安装Node.js环境。安装好之后,就可以有node执行环境以及npm包管理器。

在此基础上,就可以编写JavaScript脚本。

编写好后的JavaScript脚本,可以用node加载执行,也可以用浏览器加载执行。

更复杂地JavaScript工程,需要结合开发框架,搭建工具链。


TypeScript在JavaScript开发环境基础上,需要安装TypeScript工具链。安装方法:

npm -i -g typescript

编译打包工具

JavaScript: 开发阶段的JavaScript因为跟开发框架绑定,其实也无法直接在浏览器上运行,需要打包。打包过程会对JavaScript代码进行优化、变化、合并等,从而成为最终可以在浏览器等环境上运行JavaScript脚本。工具包括:

  • webpack、rollup、vite(vue)、snowpack(react)、esbuild

TypeScript编译:tsc、Babel

  • tsc 为 typescript compiler 的缩写,即 TypeScript 编译器,用于将 TS 代码编译为 JS 代码。通过配置 tsconfig.json 来指定如何编译。
  • Babel也可以编译TypeScript,相比tsc,不支持语法检查,不支持部分TS语法,但支持更多特性、编译速度更快、编译生成的JS体积更小。

总结

通过本文地对比,我相对清楚地了解了TypeScript和JavaScript的关系,也了解了它们之间的差异。

大部分人,可能对JavaScript比较熟,对TypeScript相对陌生。这种情况下,比较简单的策略是:

  1. 简单开发,继续使用最熟练的语言,比如JavaScript。
  2. 日常开发,可以使用原有语言,一般是JavaScript。国内大部分2B项目,用户量、安全性要求都不高,都没有必须切换到TypeScript的理由。
  3. 大型项目开发,建议启用TypeScript开发。这个过程中,可以结合选用的框架以及团队情况逐步实施。
  4. 基于新框架开发,比如决定从Vue2迁移到Vue3,自然而然会使用TypeScript。

出现JavaScript和TypeScript的使用困惑,很大程度上是因为过去JavaScript太好用了,已经在所有人心中建立了根深蒂固的印象。

以前,有人可能会说前端开发比较简单。不知道怎么写,可以看看其他网站的JS,甚至直接拿来用。

现在,这种观点已经落伍了。

随着Node.js开发模式的普及,发布到浏览器运行的JS脚本普遍是混淆打包后的状态,难以阅读和调试。

开发态的JS/TS,和运行态的JS会出现越来越大的差异。

我们对JS的理解需要不断进化,否则可能跟不上最新的前端发展状态。

参考:

万物起源-从 JavaScript 到 TypeScript

编译工具 | TypeScript开发教程

为什么说用 babel 编译 typescript 是更好的选择

javascript 的打包工具

Top 10 JavaScript errors from 1000+ projects (and how to avoid them)

ES6: 支持ES6的浏览器版本(汇总表)

Node.js ES2015/ES6, ES2016 and ES2017 support