上一節我們成功把TypeScript?編譯安裝好了，接下來我們就看看編譯器怎么用起來。

?

在寫代碼之前，我們先來選個開發工具，支持TypeScript?的IDE有很多，其中就包括了webstorm，VS code，SublimeText等等，大家可以根據自己的習慣來使用，前端君習慣了使用webstorm，之前的《vue2.0系列》教程和《趣味ES6》教程都是使用它，所以下面的課程都用webstorm?來演示。

打開webstorm，我們新建一個項目，在項目下我們新建一個TypeScript?文件：

?

我們就姑且給文件起名字為：lession-1?吧（名字隨你起）。新建完我們會看到一個lesion-1.ts?文件。

注意：TypeScript的文件都是以?.ts?后綴結尾。

接下來，我們就可以寫段TypeScript?來玩一下。

?

?

沒關系，TypeScript?不是遵循ES6的用法規范嗎？ES6的語法規范我們早就講解過了，沒壓力。那我們就用ES6的來簡單寫點代碼試試看。貼上我們的代碼片段：

?

function say(name = '前端君'){
??? return `hello,${name}`
}

let myName = '后端君';
say(myName);

?

非常簡單的一段代碼，運用了一些簡單的ES6特性。但我們知道，并不是所有的瀏覽器都能支持這段TypeScript?代碼的ES6特性的，那怎么辦？

?

?

接下來，我們就用TypeScript?編譯器把它編譯成各大瀏覽器都看得懂的JavaScript。

?

編譯TypeScript

打開命令行工具，進入你的項目所在的目錄，案例中的是：?F:\tsc?，進入該目錄下并執行以下命令：

?

tsc lession-1.ts

執行完之后，你就會看到在?F:\tsc?目錄下，除了你編寫的lession-1.ts，還多了一個lession-1.js?文件。

它就是你通過編譯器編譯出來到js文件，我們打開看看：

?

function say(name) {
??? if (name === void 0) { name = '前端君'; }
??? return "hello," + name;
}
var myName = '后端君';
say(myName);

這就是編譯出來的JavaScript，各大瀏覽器都能看得懂的，因為編譯器把ES6的特性轉化成ES5，以確保各大瀏覽器能兼容。

?

此外，每當我們修改lession-1.ts?文件的代碼，只要執行一下以上的命令，編譯器就會編譯并更新到lession-1.js?文件。

?

?

這樣豈不是很麻煩。是的，就是這么麻煩。

?

別怕，webstorm?可以幫助我們自動編譯我們編寫的TypeScript，并更新到JavaScript?文件上。

?

在編寫TypeScript代碼的時候，ws會很智能地提示你，如下圖：

（compile TypeScript to JavaScript?）

我們選擇：“OK”。一旦我們修改TypeScript ,TypeScript?就會自動編譯，同步更新到JavaScript文件，無需每次都手動執行命令，非常方便。有了webstorm?的輔助，在開發過程中我們可以更專注代碼的編寫上，大大地提高了開發效率。

TypeScript?編譯器也安裝好了，利用IDE的輔助也實現了自動編譯，那么接下來的章節，我們就會學習TypeScript?特性了。

本節小結

善用IDE開發工具，實現TypeScript?自動編譯成JavaScript，提高開發效率。

熱門文章

擴展閱讀

?原創教程：《ECMAScript 6 教程》

?原創教程：《Vue2.0基礎教程》

?原創教程：《Vue2.0進階教程》

?附加習題：《ECMAScript 6 教程》的 2套

?附加習題：《Vue2.0基礎教程》的 1 套

聊聊職場

?職場感悟：混口飯吃，談不上喜歡

?感到迷茫：我很努力，但依然很迷茫

?薪資待遇：那么點工資，能招到人嗎？

?搞笑黑話：互聯網公司黑話，搞笑到爆

資源推薦

其實學好技術并不難，架構師免費分享全網全套最新web前端、JavaScript、HTML5、PHP、數據庫……等視頻資料！

[總價值超3萬！]年薪35萬以上的大牛幾乎都看了！

加微信:?abc15689893?免費領取，由于領取的朋友比較多，所以加微信時一定要備注：555，否則很難通過。

?

總結

以上是生活随笔為你收集整理的第三节：快速编译TypeScript，提高开发效率的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。