一、什么是TypeScript?

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

一文搞懂TypeScript的安裝、使用、自動編譯的教程

二、TypeScript安裝、編譯

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

npm install -g typescript
tsc helloworld.ts

1、安裝TypeScript

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

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

2、解析ts文件

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

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

console.log("hello world")

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

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

3、自動編譯

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

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

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

修改文件index.js：

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

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

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

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

將 false 值 改為 true

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

總結(jié)

到此這篇關(guān)于TypeScript的安裝、使用、自動編譯的文章就介紹到這了,更多相關(guān)TypeScript的安裝、使用、自動編譯內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論