TypeScript如何實現安裝、使用、自動編譯

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

一、什么是TypeScript?

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

二、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文件

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

console.log("hello world")

命令行cd到 index.ts 所屬文件夾下，運行 tsc index.ts。可以看到該文件夾下生成一個index.js 文件，內容與index.ts 內容一樣。

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

3、自動編譯

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

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

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

修改文件index.js：

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

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

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

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

將 false 值 改為 true

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

看完上述內容，是不是對TypeScript如何實現安裝、使用、自動編譯有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。