當前位置：首頁 >

第三节：快速编译TypeScript，提高开发效率

發(fā)布時間：2025/3/15 26 豆豆

生活随笔收集整理的這篇文章主要介紹了第三节：快速编译TypeScript，提高开发效率小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

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

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

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

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

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

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

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

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

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

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

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

編譯TypeScript

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

tsc lession-1.ts

執(zhí)行完之后，你就會看到在?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的特性轉(zhuǎn)化成ES5，以確保各大瀏覽器能兼容。

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

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

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

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

（compile TypeScript to JavaScript?）

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

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

本節(jié)小結(jié)

善用IDE開發(fā)工具，實現(xiàn)TypeScript?自動編譯成JavaScript，提高開發(fā)效率。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：【日常踩坑】Android机微信webv
下一篇： hr妹子招聘黑话，面试的时候小心了！

日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

第三节：快速编译TypeScript，提高开发效率

總結(jié)