第三节：快速编译TypeScript，提高开发效率
上一節(jié)我們成功把TypeScript?編譯安裝好了，接下來(lái)我們就看看編譯器怎么用起來(lái)。
?
在寫代碼之前，我們先來(lái)選個(gè)開(kāi)發(fā)工具，支持TypeScript?的IDE有很多，其中就包括了webstorm，VS code，SublimeText等等，大家可以根據(jù)自己的習(xí)慣來(lái)使用，前端君習(xí)慣了使用webstorm，之前的《vue2.0系列》教程和《趣味ES6》教程都是使用它，所以下面的課程都用webstorm?來(lái)演示。
打開(kāi)webstorm，我們新建一個(gè)項(xiàng)目，在項(xiàng)目下我們新建一個(gè)TypeScript?文件：
?
我們就姑且給文件起名字為：lession-1?吧（名字隨你起）。新建完我們會(huì)看到一個(gè)lesion-1.ts?文件。
注意：TypeScript的文件都是以?.ts?后綴結(jié)尾。
接下來(lái)，我們就可以寫段TypeScript?來(lái)玩一下。
?
?
沒(méi)關(guān)系，TypeScript?不是遵循ES6的用法規(guī)范嗎？ES6的語(yǔ)法規(guī)范我們?cè)缇椭v解過(guò)了，沒(méi)壓力。那我們就用ES6的來(lái)簡(jiǎn)單寫點(diǎn)代碼試試看。貼上我們的代碼片段：
?
function say(name = '前端君'){
??? return `hello,${name}`
}
let myName = '后端君';
say(myName);
?
非常簡(jiǎn)單的一段代碼，運(yùn)用了一些簡(jiǎn)單的ES6特性。但我們知道，并不是所有的瀏覽器都能支持這段TypeScript?代碼的ES6特性的，那怎么辦？
?
?
接下來(lái)，我們就用TypeScript?編譯器把它編譯成各大瀏覽器都看得懂的JavaScript。
?
編譯TypeScript
打開(kāi)命令行工具，進(jìn)入你的項(xiàng)目所在的目錄，案例中的是：?F:\tsc?，進(jìn)入該目錄下并執(zhí)行以下命令：
?
tsc lession-1.ts
執(zhí)行完之后，你就會(huì)看到在?F:\tsc?目錄下，除了你編寫的lession-1.ts，還多了一個(gè)lession-1.js?文件。
它就是你通過(guò)編譯器編譯出來(lái)到j(luò)s文件，我們打開(kāi)看看：
?
function say(name) {
??? if (name === void 0) { name = '前端君'; }
??? return "hello," + name;
}
var myName = '后端君';
say(myName);
這就是編譯出來(lái)的JavaScript，各大瀏覽器都能看得懂的，因?yàn)榫幾g器把ES6的特性轉(zhuǎn)化成ES5，以確保各大瀏覽器能兼容。
?
此外，每當(dāng)我們修改lession-1.ts?文件的代碼，只要執(zhí)行一下以上的命令，編譯器就會(huì)編譯并更新到lession-1.js?文件。
?
?
這樣豈不是很麻煩。是的，就是這么麻煩。
?
別怕，webstorm?可以幫助我們自動(dòng)編譯我們編寫的TypeScript，并更新到JavaScript?文件上。
?
在編寫TypeScript代碼的時(shí)候，ws會(huì)很智能地提示你，如下圖：
（compile TypeScript to JavaScript?）
我們選擇：“OK”。一旦我們修改TypeScript ,TypeScript?就會(huì)自動(dòng)編譯，同步更新到JavaScript文件，無(wú)需每次都手動(dòng)執(zhí)行命令，非常方便。有了webstorm?的輔助，在開(kāi)發(fā)過(guò)程中我們可以更專注代碼的編寫上，大大地提高了開(kāi)發(fā)效率。
TypeScript?編譯器也安裝好了，利用IDE的輔助也實(shí)現(xiàn)了自動(dòng)編譯，那么接下來(lái)的章節(jié)，我們就會(huì)學(xué)習(xí)TypeScript?特性了。
本節(jié)小結(jié)
善用IDE開(kāi)發(fā)工具，實(shí)現(xiàn)TypeScript?自動(dòng)編譯成JavaScript，提高開(kāi)發(fā)效率。
熱門文章
擴(kuò)展閱讀
?原創(chuàng)教程：《ECMAScript 6 教程》
?原創(chuàng)教程：《Vue2.0基礎(chǔ)教程》
?原創(chuàng)教程：《Vue2.0進(jìn)階教程》
?附加習(xí)題：《ECMAScript 6 教程》的 2套
?附加習(xí)題：《Vue2.0基礎(chǔ)教程》的 1 套
聊聊職場(chǎng)
?職場(chǎng)感悟：混口飯吃，談不上喜歡
?感到迷茫：我很努力，但依然很迷茫
?薪資待遇：那么點(diǎn)工資，能招到人嗎？
?搞笑黑話：互聯(lián)網(wǎng)公司黑話，搞笑到爆
資源推薦
其實(shí)學(xué)好技術(shù)并不難，架構(gòu)師免費(fèi)分享全網(wǎng)全套最新web前端、JavaScript、HTML5、PHP、數(shù)據(jù)庫(kù)……等視頻資料！
[總價(jià)值超3萬(wàn)！]年薪35萬(wàn)以上的大牛幾乎都看了！
加微信:?abc15689893?免費(fèi)領(lǐng)取，由于領(lǐng)取的朋友比較多，所以加微信時(shí)一定要備注：555，否則很難通過(guò)。
?
總結(jié)
以上是生活随笔為你收集整理的第三节：快速编译TypeScript，提高开发效率的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 【日常踩坑】Android机微信webv
- 下一篇： [云炬python3玩转机器学习]skl