ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。--阮一峰《ECMAScript 6入门》
由于种种原因,ES6依然不能很好地被各大流行浏览器所支持，更不用说兼容旧版本的浏览器了。巴特，既然是标准就代表着以后大家都会使用，而且编写ES6代码体验比ES5好太多了，例如如果你是想学习Node.js的话，利用ES6新特性会使你逃离回调地狱（Callback Hell），所以推荐大家现在就开始使用ES6编写JavaScript。
那么，怎样才能让编写的ES6代码正确运行在各大流行的浏览器上，甚至旧版本的浏览器呢？
目前比较流行的就是Babel编译器
以下资料来自阮一峰的《ECMAScript 6入门》
Babel 是一个广泛使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码，从而在现有环境执行。这意味着，你可以用 ES6 的方式编写程序，又不用担心现有环境是否支持。下面是一个例子。
// 转码前
input.map(item => item + 1);
// 转码后
input.map(function (item) {
return item + 1;
});
上面的原始代码用了箭头函数，Babel 将其转为普通函数，就能在不支持箭头函数的 JavaScript 环境执行了。
而本次使用的是微软出品的TypeScript。使用TypeScript很简单，官网上有详细的使用方法。本文主要写我在VisualStudio2015（以下简称VS2015）中使用TypeScript所遇到的一些坑，记录以便查找解决。
首先VS2015安装的时候带TypeScript编译器，所以先新建一个web项目（这里我选择了带MVC的ASP.NET项目）
新建一个ASP.NET MVC项目
新建项目后可以直接运行，能在浏览器中查看一个默认的网页。
前期工作已经完成，我们在Scripts文件夹中新建一个TypeScript文件，命名为“myFristTS”。
newTypeScript.jpg
然后会出现一个弹窗，点击确定即可。之后会跳转到一个页面，那就是NuGet，如果没有，可以按照下图调出。
image.png
搜索typescript，第一个编译器就是我们所需要的（有些项目会自动安装，如果没有安装，则按照这个方法，或者使用NuGet控制台）。
image.png
安装后重新生成项目
并在刚才新建的myFristTS.ts文件中输入以下语句并保存
let firstName = "ts";
点击解决方案资源管理器的“显示所有文件”，即下图红框处，会出现相同名字的js文件（myFristTS.js），点开一看，语句变成了：
var firstName = "ts";
image.png
image.png
好了，现在只要将myFristTS.js引用到相关页面就可以直接运行了。当拖动后缀为ts文件的时候，VS也很机智乖巧地将路径转换成js文件的路径。
然而，事情并没有这么简单，由于TypeScript是保存后自动编译成JS文件的，所以会以强类型语言的方式去检查TS文件，举一个简单的例子，未定义的量将会产生一个错误。如下图所示，项目中已经引用jquery文件，但点击生成后却提示错误（因为JS是运行的时候才会检测$的呀，只要运行的时候jquery文件引用在JS文件之前，就可以使用$符号了）。值得一提的是，VS依然嘴上说这不要，身体却很诚实地会为我们生成一个JS文件。
使用jquery的美元符号$并点击生成后会产生错误，但依然会生成JS文件
如果是普通的变量，我们直接定义一个即可，但这个是jquery唯一指定标识符（嗯，唯一指定），既然不能像以前那样引用，为$符号定义的话也太麻烦了吧。
不用担心，由于JQuery是一个非常棒的第三方JS库，早就有人以光速的思必得制作了定义文件，根据TypeScript官网约定，定义的文件统一以d.ts结尾。
现在，我们就在NuGet中查找并安装jquery.d.ts文件吧。
直接安装即可
安装完成后
安装完成后Scripts文件夹中多了一个typings文件夹，里面就是我们需要的jquery.d.ts。同时TS文件中的$也不报错了。现在就可以轻松愉快地使用JQuery了。
在使用的过程中，细心的同学产生了疑问，官网不是说可以编译成ES3吗？哪里可以设置呢？官网文档有一个tsconfig.json的配置文件，怎么就找不到的呢？
TypeScript首页一个描述
其实我在项目中也找不到文件，全局搜索也找不到，但这个文件的确是存在的，可能被隐藏起来了，所以VS把TypeScript配置集成到了项目属性当中，对TypeScriptDemo项目右键并选择属性，就看到了。
image.png
从上图中可以知道，可以设置保存后输出的ES版本，这里选择的是ES5，保存的时候是否编译等简单的设置。
图形化的配置固然简单，但比不上通过tsconfig.json配置文件来配置一些特定的要求。特别是在使用一些ES6的函数中，居然报错提示没找到名称。如下图，居然找不到Symbol。。。而且在刚刚的配置标签页中找不到如何设置注入库。
image.png
所以，还是自己建立一个tsconfig.json吧。这个需求VS已经帮我们想好了。
在Scripts文件夹右键新建一个新建项，则看到TypeScript JSON配置文件。点击添加之后，就会自动填写默认配置。
{
"compilerOptions": {
"noImplicitAny": false,
"noEmitOnError": true,
"removeComments": false,
"sourceMap": true,
"target": "es5"
},
"exclude": [
"node_modules",
"wwwroot"
]
}
新建一个JSON配置文件
详细的配置可以参考这里
现在要解决VS2015不能识别Symbol的问题。如下配置就好：
"compilerOptions": {
"noImplicitAny": false,
"noEmitOnError": true,
"removeComments": false,
"sourceMap": true,
"target": "es5",
"lib": [
"es2015",
"es6",
"dom",
"scripthost",
"es2015.symbol"
]
},
好了，Symbol的问题解决了，类似这样的找不到ES6新函数名称的问题也可以通过引入库解决。
再看看刚才的配置标签页，已经被禁用了。
禁用
配置的问题解决了，但出现了一个特大问题：现在保存不能自动编译JS文件了，必须要重新生成项目。
别急，官网上写得很清楚，在配置文件最顶层配置以下语句即可。
"compileOnSave": true
官网说明
配置完毕再重新生成，还是不行，由于未配置JSON文件的时候是可以保存生成的，所以不存在缺少插件的问题。找了很久，最后。。。。。
重启吧
最后，这两天看ES6所踩过的坑也就全部记录下来了。三个解决方法应该能解决TypeScript在VS中遇到的奇奇怪怪的问题。
希望能帮助到你，若遇到其他问题此文也会更新。
另外ES6入门推荐看阮一峰的《ECMAScript 6入门》
网友评论