TypeScript如何實(shí)現(xiàn)安裝、使用、自動(dòng)編譯

這篇文章主要講解了TypeScript如何實(shí)現(xiàn)安裝、使用、自動(dòng)編譯，內(nèi)容清晰明了，對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會(huì)有幫助。

一、什么是TypeScript?

1、TypeScript是一種由微軟開(kāi)發(fā)的開(kāi)源、跨平臺(tái)的編程語(yǔ)言。 他是JavaScript的超集，而且本質(zhì)上向這個(gè)語(yǔ)言添加了可選的靜態(tài)類(lèi)型和基于類(lèi)的面向?qū)ο缶幊?，遵循最新的ES5、ES6規(guī)范。(TypeScript里邊可以直接寫(xiě)ES5、ES6代碼)
2、TypeScript擴(kuò)展了JavaScript語(yǔ)法*，所以在任何現(xiàn)有的JavaScript程序開(kāi)源運(yùn)行在TypeScript環(huán)境中。TypeScript是為大型應(yīng)用的開(kāi)發(fā)而設(shè)計(jì)，最終會(huì)編譯為JavaScript代碼。
3、最新的Vue、React也可以集成TypeScript，而且谷歌也在大力支持TypeScript的推廣，谷歌的angular2.x+就是基于Typescript語(yǔ)法。
4、TypeScript是未來(lái)開(kāi)發(fā)的一個(gè)標(biāo)準(zhǔn)，一個(gè)趨勢(shì)。

二、TypeScript安裝、編譯

注意：typescript安裝之前必須安裝nodejs。

npm install -g typescript
tsc helloworld.ts

1、安裝TypeScript

使用命令進(jìn)行安裝：npm install -g typescript

typescript文件后綴名是以。ts結(jié)尾的，瀏覽器是無(wú)法解析 . ts文件的，也無(wú)法解析ES6代碼，所以需要編譯為瀏覽器可以解析的ES5的代碼。

2、解析ts文件

將ts文件編譯為可運(yùn)行的js文件

在你放代碼的文件夾內(nèi)新建一個(gè) index.ts 文件，將以下代碼復(fù)制到 index.ts 文件中：

console.log("hello world")

命令行cd到 index.ts 所屬文件夾下，運(yùn)行 tsc index.ts?？梢钥吹皆撐募A下生成一個(gè)index.js 文件，內(nèi)容與index.ts 內(nèi)容一樣。

但是 ts 代碼，每次開(kāi)發(fā)都要運(yùn)行命令重新編譯，比較麻煩，如果可以一邊寫(xiě)代碼一邊編譯最好，那么就需要自動(dòng)編譯了。

3、自動(dòng)編譯

下面介紹VScode、HBuilder X開(kāi)發(fā)工具如何配置自動(dòng)編譯。

VScode自動(dòng)編譯.ts文件的配置：

1、在項(xiàng)目根目錄下運(yùn)行命令 tsc–init ，生成tsconfig.json配置文件。打開(kāi)該文件修改： outDir 注釋去掉，值為編譯文件生成的目錄。
2、點(diǎn)擊菜單 任務(wù)-運(yùn)行任務(wù) 選擇 tsc：監(jiān)視-tsconfig.json 然后就可以自動(dòng)生成代碼

修改文件index.js：

保存，就可以看到生成了index.js文件，內(nèi)容如下：

HBuilder X自動(dòng)編譯.ts文件的配置：

1、菜單欄：工具–插件安裝；
2、找到typescript插件，點(diǎn)擊安裝；
3、手動(dòng)編譯：在ts文件名上，右鍵–外部命令/插件–typescript–編譯TypeScript，即可生產(chǎn)對(duì)應(yīng)的js文件；
4、自動(dòng)編譯配置：在ts文件名上，右鍵–外部命令/插件–typescript–插件配置，找到以下內(nèi)容：

//是否在保存時(shí)自動(dòng)觸發(fā)。如配為true，就會(huì)在保存時(shí)自動(dòng)觸發(fā)
"onDidSaveExecution": false

將 false 值 改為 true

5、重新啟動(dòng)HBuilder，再次修改保存，就是生成對(duì)應(yīng)的js文件。

看完上述內(nèi)容，是不是對(duì)TypeScript如何實(shí)現(xiàn)安裝、使用、自動(dòng)編譯有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。