英文原文:Understanding ES5, ES2015 and TypeScript
参与翻译 (2人) : LeoXu, 溪边九节

ES5,ES2015(原名 ES6 )和 TypeScript 之间有什么不同?我们应该学习和使用哪一个?

首先,让我们为讨论这些建立一个基础。TypeScript 是 JavaScript 的超集。ES2015 是 ES5 的改进。知道关系可以让我们更容易学习他们。

我们想要理解他们之间的差异,首先我们就必须理解他们为什么存在。 我们从 ES5 开始。

ES5

我们大多数人已经用了 ES5 好多年了。函数式编程在它这儿最棒,或者说最糟糕,这要取决于你如何看待它了。我个人喜爱用ES5编程。所有的现代浏览器都对它进行了支持。它极其灵活,但这也会产生很多能将应用推到坑里的因素。作用于、闭包、IIFE以及良好的防御式逻辑,这些对于确保我们的ES5代码不翻船都是必要的。尽管如此,其灵活性还是我们要依靠的一份力量。

这份图表展示了当前浏览器对于ES5的兼容程度。

也许ES5给我们带来的最大的问题就是在开发时定位问题的困难。ES5 因其复杂性而缺少工具,充其量就是有工具能解析如何检查ES5的某些关键点。我们想要知道的是在另外一个文件中的对象包含了哪些属性, 一个函数中的一个无效参数可能是什么, 或者让我们知道在什么时候我们在一个不正常的作用域里面使用了一个变量。ES5 让这些事情对于开发者和工具而言都困难了起来。

ES6/E2015 飞跃前进

ES2015 是从 ES5的一个巨大飞跃。它给JavaScript增加了大量的功能特性。这些功能特性解决一些问题,这些问题曾使得ES5编程成为一项挑战。它们是可选的,因此我们可以在ES2015中继续有效的使用 ES5 (包括函数)。

这里所见是 Luke Hoban 提供的 ES2015的一些功能特性的参考。完整的列表可以在这份文档中查看。 - arrows - classes -增强的对象文本 - 模板字符串 - 析构 - default + rest + spread - let + const - 迭代器 + for…of - generators - unicode - 模块 - 模块加载器 - map + set + weakmap + weakset - 代理 - 符号 - 内置插件式的可子类化 - 承诺 - math + number + string + array + 对象 API - 二进制和八进制文本 - 反射api - 尾调用

这是对于ES5的一个巨大飞跃,而现代的浏览器都在争先实现所有的这些功能特性。这份图表展示了浏览器当前对于ES2015的兼容程度。

Node.js 是针对V8引擎的现代版本而构建的。根据其文档来看,Node 已经对 ES2015的许多东西进行了实现。

Node 4.x 给自己打上了 LTS 标签,定位于长期支持的版本。 LTS 标签显示了他们的产品发布规律。所有偶数的主版本专注于稳定性和安全性。所有奇数的主版本 (例如 5.x) 则归入短期支持 (STS) 的版本, 专注于积极地拓展和更高频率的更新。简言之,我的建议是仍将node4用于生产环境的开发中,而将node5用于研究可能会在未来的LTS版本中存在的功能特性。你可以读一读这里的《node版本官方指南》。

回到 ES2015, 现在我们已经拥有了数量惊人的功能可以选择用来编写代码。

开发者如何看待 ES2015?

我们也许想要知道谁可能会对ES2015感兴趣,还有谁并不感兴趣。许多的ES5都深谙这门语言的利弊。在JavaScript领域混迹了十多年以后,我们可能会感觉ES5用起来非常舒适。如果没有明白其中的价值,一旦我们已经掌握了一门语言,要找个理由跳转到一个新的版本就可能有点困难了。我们会得到什么?我们要解决什么问题呢? 这就是我们自然而然会生出的想法。一旦我们认定迁移到ES2015有利可图, 那么就会做出迁移的决定。

也有许多ES5开发者都等不及要使用 ES2015 了。关键是很多曾今使用ES5的人已经在用到ES2015了,而更多的人则仍然在决定中踯躅不前。

现如今 JavaScript 开发者有许许多多,而且还有更多人在进入这个领域。我认为现在正考虑学习JavaScript以及那些仍在在学习的人的数量,将会比目前正在使用它的人要少。 JavaScript 正处在发展之中,而并不是每个人都会有一个成熟的 ES5 开发背景。许多人都来自于Java和C#已经其它流行的语言和框架。这些的许多都已经拥有了 ES2015最近引入的功能特性,并且用了都好几年了。这使得ES2015对于他们而言比起ES5来说更容易过渡。而现在也是个好时候,因为许多现代浏览器以及 Node 都在支持着ES2015。

因而我们有许多人,都拥有着不同的背景,却都会走上 ES2015 (或者更高版本) 的迁移之路。

支持 ES5 的浏览器

我们如何才可以在还不支持ES2015的浏览器中运行ES2015? 我们可以使用像 Babel 这样的工具,用 ES2015 编写代码,然后将代码转换成 ES5。Babel 使得编写 ES2015 变得简单 (未来的ES2016以及更高版本也不在话下),然后仍将代码向下编译成老版本的JavaScript。相当的酷!

TypeScript

TypeScript 适合用在哪里呢? 甚至于我们是否应该去使用它呢?

首先,我觉得这个名字就有点让人望而却步。TypeScript中的Type这个词表明我们会拥有类型。这些类型是可选的,因此我们并不是非得用上它们不可。不相信我? 当你尝试将ES5代码复制到 TypeScript playground 中去的时候。看看,天啦! 不需要任何类型! 所以我们是不是可以选择性的它 Type?Script 或者 [Type]Script 呢? 开个玩笑,类型知识TypeScript一块而已。也许更好的名称就是简单的 ES+。

让我们回头来回顾一下之前我曾提过的问题,许多开发者在编写JavaScript的时候都会遇到: 在开发时识别错误的困难。

如果在编写它们的时候就我们可以识别出作用域问题会如何呢? 如果可以在我们的工具中通过红色的下划线识别不匹配的参数会如何呢? 如果编辑器和IDE可以告知我们在不正当的使用了别人或者我们自己的代码的时候会告诉我们,会如何呢?这些都是我们通常要依赖工具的地方。

尽早地识别出问题

无论我们使用的是 Atom, VS Code, Visual Studio, Web Storm, 还是 Sublime Text,我们所要享受的都是其多得有点过剩的固有功能或者可供我们选择的工具扩展,是它们在帮助我们较快的写出更好的代码。这些工具应该(而且能够)对尽早识别出问题起到有所帮助。

当我们编写代码时候,如果能马上找到一个问题的话,就会更加有意思,于是我们就可以就地解决它 … 或者在早上5点钟被叫醒,因为恰好在那时候触发了我们隐藏的bug而导致业务中断,生产环境爆出问题?5点那个时候我宁愿跟我的家人待在一起

ES5, ES2015 和 TypeScript 的区别相关推荐

  1. 理解 ES5, ES2015(ES6) 和 TypeScript

    理解 ES5, ES2015(ES6) 和 TypeScript 本文转载自:众成翻译 译者:kayson 链接:http://www.zcfy.cc/article/1332 原文:https:// ...

  2. es5和es6声明类的区别/es5和es6继承的区别

    // es5和es6声明类的区别,es5没有统一语法规范.es6有统一写法规范 start. // es5声明"类"的语法--伪类 // function Person(name, ...

  3. JS面试题--ES5和ES6有什么区别?

    ES5和ES6有什么区别? ES6新增了一些技术: 1.let声明变量和const声明常量,两个都有块级作用域ES5中是没有块级作用域的,并且var有变量提升,在let中,使用的变量一定要进行声明 2 ...

  4. ES5和ES6继承的区别

    ES5的继承方法可以看这篇: https://blog.csdn.net/qq593249106/article/details/83098432 ES5与ES6的继承方法对照: ES5 functi ...

  5. 常用浏览器内核的了解、ES5和ES6的区别、ES6的更新的笔试题

    对浏览器的内核的了解?有哪些内核?(重点6分) 浏览器要渲染出网页给用户看,必须加载html编码和js脚本,渲染引擎渲染页面的UI和js执行引擎操作内存,就是浏览器的的重要组成程序:内核 根据不同的浏 ...

  6. es5和es6的区别

    最近在看阮一峰的<ECMAScript6入门>,讲真,这本书对初学者真的很有帮助,在这里也推荐给大家.接下来,我要说的一些例子也大多来源于这本书,如果对这本书感兴趣的小伙伴,也可以戳这里哦 ...

  7. TypeScript 3.9 正式发布!平均编译时长从 26 秒缩短至 10 秒

    作者 | 微软官方博客 译者 | 核子可乐 策划 | 小智 稿源 | 前端之巅 今天,微软在其官方博客宣布:TypeScript 3.9 版本已经正式发布,详情见下文. 有些朋友可能对 TypeScr ...

  8. typescript map转对象_TypeScript 快速上手及学习笔记 - JoeYoung

    TypeScript是JavaScript类型的超集,它可以编译成纯JavaScript. TypeScript可以在任何浏览器.任何计算机和任何操作系统上运行,并且是开源的. 什么是 TypeScr ...

  9. 快速上手 TypeScript

    快速上手 TypeScript ypeScript 简称 TS ,既是一门新语言,也是 JS 的一个超集,它是在 JavaScript 的基础上增加了一套类型系统,它支持所有的 JS 语句,为工程化开 ...

  10. pomelo + vscode + typescript搭建可约束可调试的游戏服务端框架

    说在前面 pomelo: 它是网易开源的一套基于Node.js的游戏服务端框架,详情请戳这里关于pomelo的种种这里不详细说.点击链接查看详情.但是由于pomelo是js项目,使用起来的时候并不是很 ...

最新文章

  1. html 组件化 编辑器,vue.js组件化使用百度富文本编辑器(一)
  2. 21017-05-13 21:05
  3. LR菜鸟入门 -- LightRoom安装/预设
  4. 玩家游戏账号被封十年,解封后一进游戏傻眼了:比当年还火?
  5. 智能路由器-OpenWRT 系列四 (挂载移动设备)
  6. 项目管理软件伙伴https://www.huobanyun.cn/
  7. document.createelement如何绑定点击事件_番外篇-EXCEL如何使用宏(VBA)
  8. Java描述设计模式(15):责任链模式
  9. Reactive(2) 响应式流与制奶厂业务
  10. Setting property 'source' to 'org.eclipse.jst.jee.
  11. laravel的blade模板的布局嵌套
  12. English trip V1 - 2.Don't Do That Teacher:Patrick Key: 祈使句(imperatives)
  13. SQL SERVER 2005 使用订阅发布同步数据库
  14. 数组java8求和_java – 如何使用IntStream对int数组的特定索引号求和?
  15. CPU自制入门 第三章 编程
  16. spotify注册服务器,【评测】Cocktail Audio N25:集USB解码、TIDAL、Spotify、NAS 串流、音乐服务器于......
  17. html中字体都可以设置哪些,html中设置字体的属性有哪些
  18. 计算机c类论文什么水平,国内B类论文一般是什么级别
  19. C++随机设置壁纸小软件
  20. Appium 自动化测试(5)-- Appium详细介绍:Appium 手机自动化测试_TesterHome公开版pdf

热门文章

  1. Presto-Hbase 指定worke任务节点操作
  2. PMI-ACP练习题(22)
  3. 芒七千的UI个人分享
  4. 流量之战:阿里150亿入股分众,到底为哪般?
  5. CocosCreator之字体资源
  6. Map container is already initialized.
  7. 匿名发脉脉的拼多多员工,是如何被发现的?背后真相令人发指...
  8. 大气颗粒物 PMF 源解析
  9. GetFirmwareEnvironmentVariable失败返回错误码1314
  10. springboot+vue疫情管理大作业