ECMAScript 6.0（以下簡(jiǎn)稱 ES6）是 JavaScript 語(yǔ)言的下一代標(biāo)準(zhǔn)，已經(jīng)在2015年6月正式發(fā)布了昔汉。它的目標(biāo)，是使得 JavaScript 語(yǔ)言可以用來編寫復(fù)雜的大型應(yīng)用程序刊愚，成為企業(yè)級(jí)開發(fā)語(yǔ)言馍驯。--阮一峰《ECMAScript 6入門》
由于種種原因,ES6依然不能很好地被各大流行瀏覽器所支持，更不用說兼容舊版本的瀏覽器了群井。巴特状飞，既然是標(biāo)準(zhǔn)就代表著以后大家都會(huì)使用，而且編寫ES6代碼體驗(yàn)比ES5好太多了书斜，例如如果你是想學(xué)習(xí)Node.js的話诬辈，利用ES6新特性會(huì)使你逃離回調(diào)地獄（Callback Hell），所以推薦大家現(xiàn)在就開始使用ES6編寫JavaScript荐吉。
那么焙糟，怎樣才能讓編寫的ES6代碼正確運(yùn)行在各大流行的瀏覽器上，甚至舊版本的瀏覽器呢样屠？
目前比較流行的就是Babel編譯器
以下資料來自阮一峰的《ECMAScript 6入門》
Babel 是一個(gè)廣泛使用的 ES6 轉(zhuǎn)碼器穿撮，可以將 ES6 代碼轉(zhuǎn)為 ES5 代碼，從而在現(xiàn)有環(huán)境執(zhí)行痪欲。這意味著悦穿，你可以用 ES6 的方式編寫程序，又不用擔(dān)心現(xiàn)有環(huán)境是否支持业踢。下面是一個(gè)例子栗柒。
// 轉(zhuǎn)碼前
input.map(item => item + 1);
// 轉(zhuǎn)碼后
input.map(function (item) {
return item + 1;
});
上面的原始代碼用了箭頭函數(shù)，Babel 將其轉(zhuǎn)為普通函數(shù)陨亡，就能在不支持箭頭函數(shù)的 JavaScript 環(huán)境執(zhí)行了傍衡。
而本次使用的是微軟出品的TypeScript。使用TypeScript很簡(jiǎn)單负蠕，官網(wǎng)上有詳細(xì)的使用方法蛙埂。本文主要寫我在VisualStudio2015（以下簡(jiǎn)稱VS2015）中使用TypeScript所遇到的一些坑，記錄以便查找解決遮糖。
首先VS2015安裝的時(shí)候帶TypeScript編譯器绣的，所以先新建一個(gè)web項(xiàng)目（這里我選擇了帶MVC的ASP.NET項(xiàng)目）
新建項(xiàng)目后可以直接運(yùn)行，能在瀏覽器中查看一個(gè)默認(rèn)的網(wǎng)頁(yè)欲账。
前期工作已經(jīng)完成屡江，我們?cè)赟cripts文件夾中新建一個(gè)TypeScript文件，命名為“myFristTS”赛不。
然后會(huì)出現(xiàn)一個(gè)彈窗惩嘉，點(diǎn)擊確定即可。之后會(huì)跳轉(zhuǎn)到一個(gè)頁(yè)面踢故，那就是NuGet文黎，如果沒有惹苗，可以按照下圖調(diào)出。
搜索typescript耸峭，第一個(gè)編譯器就是我們所需要的（有些項(xiàng)目會(huì)自動(dòng)安裝桩蓉，如果沒有安裝，則按照這個(gè)方法劳闹，或者使用NuGet控制臺(tái)）院究。
安裝后重新生成項(xiàng)目
并在剛才新建的myFristTS.ts文件中輸入以下語(yǔ)句并保存
let firstName = "ts";
點(diǎn)擊解決方案資源管理器的“顯示所有文件”，即下圖紅框處本涕，會(huì)出現(xiàn)相同名字的js文件（myFristTS.js）业汰，點(diǎn)開一看，語(yǔ)句變成了：
var firstName = "ts";
好了偏友，現(xiàn)在只要將myFristTS.js引用到相關(guān)頁(yè)面就可以直接運(yùn)行了蔬胯。當(dāng)拖動(dòng)后綴為ts文件的時(shí)候，VS也很機(jī)智乖巧地將路徑轉(zhuǎn)換成js文件的路徑位他。
然而氛濒，事情并沒有這么簡(jiǎn)單，由于TypeScript是保存后自動(dòng)編譯成JS文件的鹅髓，所以會(huì)以強(qiáng)類型語(yǔ)言的方式去檢查TS文件舞竿，舉一個(gè)簡(jiǎn)單的例子，未定義的量將會(huì)產(chǎn)生一個(gè)錯(cuò)誤窿冯。如下圖所示骗奖，項(xiàng)目中已經(jīng)引用jquery文件，但點(diǎn)擊生成后卻提示錯(cuò)誤（因?yàn)镴S是運(yùn)行的時(shí)候才會(huì)檢測(cè)$的呀醒串，只要運(yùn)行的時(shí)候jquery文件引用在JS文件之前执桌，就可以使用$符號(hào)了）。值得一提的是芜赌，VS依然嘴上說這不要仰挣，身體卻很誠(chéng)實(shí)地會(huì)為我們生成一個(gè)JS文件。
如果是普通的變量膘壶，我們直接定義一個(gè)即可，但這個(gè)是jquery唯一指定標(biāo)識(shí)符（嗯洲愤，唯一指定）颓芭，既然不能像以前那樣引用，為$符號(hào)定義的話也太麻煩了吧柬赐。
不用擔(dān)心亡问，由于JQuery是一個(gè)非常棒的第三方JS庫(kù)，早就有人以光速的思必得制作了定義文件肛宋，根據(jù)TypeScript官網(wǎng)約定玛界，定義的文件統(tǒng)一以d.ts結(jié)尾万矾。
現(xiàn)在，我們就在NuGet中查找并安裝jquery.d.ts文件吧慎框。
安裝完成后Scripts文件夾中多了一個(gè)typings文件夾，里面就是我們需要的jquery.d.ts后添。同時(shí)TS文件中的$也不報(bào)錯(cuò)了”靠荩現(xiàn)在就可以輕松愉快地使用JQuery了。
在使用的過程中遇西，細(xì)心的同學(xué)產(chǎn)生了疑問馅精，官網(wǎng)不是說可以編譯成ES3嗎？哪里可以設(shè)置呢粱檀？官網(wǎng)文檔有一個(gè)tsconfig.json的配置文件洲敢，怎么就找不到的呢？
其實(shí)我在項(xiàng)目中也找不到文件茄蚯，全局搜索也找不到压彭，但這個(gè)文件的確是存在的，可能被隱藏起來了渗常，所以VS把TypeScript配置集成到了項(xiàng)目屬性當(dāng)中壮不，對(duì)TypeScriptDemo項(xiàng)目右鍵并選擇屬性，就看到了皱碘。
從上圖中可以知道询一，可以設(shè)置保存后輸出的ES版本，這里選擇的是ES5癌椿，保存的時(shí)候是否編譯等簡(jiǎn)單的設(shè)置健蕊。
圖形化的配置固然簡(jiǎn)單，但比不上通過tsconfig.json配置文件來配置一些特定的要求踢俄。特別是在使用一些ES6的函數(shù)中缩功，居然報(bào)錯(cuò)提示沒找到名稱。如下圖褪贵，居然找不到Symbol掂之。。脆丁。而且在剛剛的配置標(biāo)簽頁(yè)中找不到如何設(shè)置注入庫(kù)世舰。
所以，還是自己建立一個(gè)tsconfig.json吧槽卫。這個(gè)需求VS已經(jīng)幫我們想好了跟压。
在Scripts文件夾右鍵新建一個(gè)新建項(xiàng)，則看到TypeScript JSON配置文件歼培。點(diǎn)擊添加之后震蒋，就會(huì)自動(dòng)填寫默認(rèn)配置茸塞。
{
"compilerOptions": {
"noImplicitAny": false,
"noEmitOnError": true,
"removeComments": false,
"sourceMap": true,
"target": "es5"
},
"exclude": [
"node_modules",
"wwwroot"
]
}
詳細(xì)的配置可以參考這里
現(xiàn)在要解決VS2015不能識(shí)別Symbol的問題。如下配置就好：
"compilerOptions": {
"noImplicitAny": false,
"noEmitOnError": true,
"removeComments": false,
"sourceMap": true,
"target": "es5",
"lib": [
"es2015",
"es6",
"dom",
"scripthost",
"es2015.symbol"
]
},
好了查剖，Symbol的問題解決了钾虐，類似這樣的找不到ES6新函數(shù)名稱的問題也可以通過引入庫(kù)解決。
再看看剛才的配置標(biāo)簽頁(yè)笋庄，已經(jīng)被禁用了效扫。
配置的問題解決了，但出現(xiàn)了一個(gè)特大問題：現(xiàn)在保存不能自動(dòng)編譯JS文件了直砂，必須要重新生成項(xiàng)目菌仁。
別急，官網(wǎng)上寫得很清楚静暂，在配置文件最頂層配置以下語(yǔ)句即可济丘。
"compileOnSave": true
配置完畢再重新生成，還是不行洽蛀，由于未配置JSON文件的時(shí)候是可以保存生成的摹迷，所以不存在缺少插件的問題。找了很久辱士，最后泪掀。。颂碘。异赫。。
最后头岔，這兩天看ES6所踩過的坑也就全部記錄下來了塔拳。三個(gè)解決方法應(yīng)該能解決TypeScript在VS中遇到的奇奇怪怪的問題。
希望能幫助到你峡竣，若遇到其他問題此文也會(huì)更新靠抑。
另外ES6入門推薦看阮一峰的《ECMAScript 6入門》
