从 TypeScript 到 ES6 到 ES5

在我初学前端的很长一段时间，不愿意碰git，不愿意碰框架，总是嫌麻烦，连ES6也没有怎么去弄明白，真的很浅显，很长时间也都在学习一些很落后的知识，止步不前，我觉得很多人应该也和我一样。
前端变化真的很快，国内国外的状况也不一样，所以很大程度上取决于环境。
想学好前端，真的要主动，然后对所有的英文文档耐心一点。
那么从JavaScript到ES6到TypeScript，初学的你可能和我一样困惑，那么接下来看看它们究竟是怎么一回事吧~

首先来看三个名词的具体解释：

1.JavsScript

JavaScript（通常简写为JS）是一种轻量的、解释性的、面向对象的头等函数语言，其最广为人知的应用是作为网页的脚本语言，但同时它也在很多非浏览器环境下使用。JS是一种动态的基于原型和多范式的脚本语言，支持面向对象、命令式和函数式的编程风格。

JavaScript运行在网页的客户端，能被用来设计和编程网页在事件发生时的行为。JavaScript不仅易学而且强大，因此广泛用于对网页的控制。

JS基础学习看这里：
https://developer.mozilla.org…

2.ES6（ECMAScript 6）

ECMAScript 是 JavaScript 的标准。截至 2012 年，所有的现代浏览器都完整了支持 ECMAScript 5.1，旧式的浏览器至少支持 ECMAScript 3 标准。
在2015年6月17日，ECMA国际组织发布了 ECMAScript 的第六版，该版本正式名称为ECMAScript 2015，但通常被称为 ECMAScript 6 或者ES6。
自此，ECMAScript每年发布一次新标准。

ES6学习看这里：
http://es6.ruanyifeng.com/#do…

3.TypeScript

TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。安德斯·海尔斯伯格，C#的首席架构师，已工作于TypeScript的开发。

TypeScript学习看这里：
中文官网：https://www.tslang.cn/index.html
英文官网：http://www.typescriptlang.org/
（学会看官网文档，比你去找各种教程有用得多。）

划重点：

• TypeScript 是 ES6 JavaScript 类型化的超集。

• ES6 JavaScript 是 ES5 JavaScript 的超集。

• ES5 是可以在所有现代浏览器中运行的 JavaScript。

降级的过程是

• TypeScript 降级到 带装饰器的 ES6 。

• 带装饰器的 ES6 降级到 没有装饰器的 ES6 (普通 ES6)。

• 没有装饰器的 ES6 降级到 ES5 。

TypeScript 翻译到 带装饰器的 ES6 时，移除了类属性访问修饰符，如public和private。 移除了大部分的类型声明，如:string和:boolean。 但保留了用于依赖注入的构造函数参数类型。

带装饰器的 ES6 翻译到 普通 ES6 时，移除了所有的装饰器和剩下的类型。 必须在构造函数中声明属性（this.title = '...'），而不是在类的代码体中。

最后，普通 ES6翻译成ES5，缺少的主要特性是import和class声明。

From Angular 2

https://angular.cn/guide/ts-t…

对 普通 ES6 的翻译，可以从类似 TypeScript 快速开始的设置开始， 调整相应代码。然后用 Babel 进行转译，使用es2015预设值。 要在 Babel 中使用装饰器和注释，还需安装angular2预设值。