今天試了下在Asp.net core中集成typescript，發(fā)現(xiàn)vs2019對typescript集成的支持還是非常友好的。本文在這里簡單的介紹一下。

由于typescript文件是編譯為js后作為靜態(tài)文件發(fā)布的，因此首先需要啟用靜態(tài)文件瀏覽：

app.UseStaticFiles();

在WWWRoot文件夾下添加ts文件：

此時VS會提示安裝Microsoft.TypeScript.MSBuild Nuget包，根據(jù)向?qū)О惭b即可。

編輯TypeScript文件，可以看到生成了相應(yīng)的js文件。

新建html文件，引入生成的js文件即可。

<script src="scripts/app.js"></script>

以上就是一個基本的流程，本身是比較簡單的，VS自動集成了build工具，編輯或生成項目的時候，會將ts文件生成js文件，html中直接引用生成的js即可。

另外，系統(tǒng)還會自動發(fā)布ts和map文件，可以以ts文件的 直接調(diào)試，非常方便。

在IE中啟用Async/Await支持

async/await是我非常喜歡的語法，但它是ES2107中引入的，無緣于IE。而現(xiàn)在的項目是要保持IE的支持，使用typescript一個好處是可以在IE11中使用async/await語法。

為了演示這一過程，首先寫一個測試函數(shù)：

function?delay(ms:?number)?{
????return?new?Promise<void>(resolve?=>?setTimeout(resolve,?ms));
}
 
async?function?foo()?{
????console.log("Knock,?knock!");

????await?delay(1000);
????console.log("Who's?there?");

????await?delay(1000);
????console.log("async/await!");
}

編譯的時候發(fā)現(xiàn)無法通過，提示沒有Promise，要求將lib改成es2015的版本。

注意：這里不是講js的輸出版本改成es2015，如果這樣改了的話，能編譯通過，但會輸出es2015的腳本，是無法在ie11上運行的

解決方法是增加一個tsconfig.json文件，指定typescript的編譯選項，這里是我的一個參考配置：

{
????"compilerOptions":?{
????????"noImplicitAny":?false,
????????"noEmitOnError":?true,
????????"removeComments":?false,
????????"sourceMap":?true,
????????"lib":?["es6",?"dom"],
????????"target":?"es5"
????},
????"exclude":?["node_modules"]
}

注：tsconfig.cofig指定的選項的優(yōu)先級是比csproj中的typescript選項高的，加了這個文件后，我們是可以將csproj文件中的相應(yīng)配置刪掉的。另外，這個配置文件里面也可以進行更多的配置設(shè)置。

因為我們要輸出為IE中支持的腳本，這兒的targert選擇的是es5。增加了這個選項后，就可以編譯通過了，但是，在IE中運行的時候還是出錯：

原因很簡單，es5的runtime中沒有promise結(jié)構(gòu)的定義。要解決這個問題，我們需要安裝promise-polyfill的npm包。這里我是在html中直接引用CDN腳本

<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>

加入了該腳本后，就可以愉快的在ie中進行await了。

總結(jié)一下也就是額外的兩步：

• 添加tsconfig，指定es6的lib

• 添加promise-polyfill的引用

當然，如果只考慮高版本的chrome的話支持，就沒有這么麻煩，直接指定target為es2017即可，生成的JS腳本更加簡潔。具體原理可以參看參考文檔2，這里就不介紹了，

到此這篇關(guān)于ASP.NET Core集成TypeScript的文章就介紹到這了。希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論