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

成都創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供府谷網(wǎng)站建設、府谷做網(wǎng)站、府谷網(wǎng)站設計、府谷網(wǎng)站制作等企業(yè)網(wǎng)站建設、網(wǎng)頁設計與制作、府谷企業(yè)網(wǎng)站模板建站服務，10多年府谷做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡服務。

一、什么是TypeScript?

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

二、TypeScript安裝、編譯

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

npm install -g typescript
tsc helloworld.ts

1、安裝TypeScript

使用命令進行安裝：npm install -g typescript

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

2、解析ts文件

將ts文件編譯為可運行的js文件

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

console.log("hello world")

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

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

3、自動編譯

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

VScode自動編譯.ts文件的配置：

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

修改文件index.js：

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

HBuilder X自動編譯.ts文件的配置：

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

//是否在保存時自動觸發(fā)。如配為true，就會在保存時自動觸發(fā)
"onDidSaveExecution": false

將 false 值 改為 true

5、重新啟動HBuilder，再次修改保存，就是生成對應的js文件。

看完上述內(nèi)容，是不是對TypeScript如何實現(xiàn)安裝、使用、自動編譯有進一步的了解，如果還想學習更多內(nèi)容，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。