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

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

app.UseStaticFiles();

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

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

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

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

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

以上就是一個(gè)基本的流程，本身是比較簡(jiǎn)單的，VS自動(dòng)集成了build工具，編輯或生成項(xiàng)目的時(shí)候，會(huì)將ts文件生成js文件，html中直接引用生成的js即可。

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

在IE中啟用Async/Await支持

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

為了演示這一過(guò)程，首先寫(xiě)一個(gè)測(cè)試函數(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!");
}

編譯的時(shí)候發(fā)現(xiàn)無(wú)法通過(guò)，提示沒(méi)有Promise，要求將lib改成es2015的版本。

注意：這里不是講js的輸出版本改成es2015，如果這樣改了的話(huà)，能編譯通過(guò)，但會(huì)輸出es2015的腳本，是無(wú)法在ie11上運(yùn)行的

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

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

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

因?yàn)槲覀円敵鰹镮E中支持的腳本，這兒的targert選擇的是es5。增加了這個(gè)選項(xiàng)后，就可以編譯通過(guò)了，但是，在IE中運(yùn)行的時(shí)候還是出錯(cuò)：

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

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

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

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

• 添加tsconfig，指定es6的lib

• 添加promise-polyfill的引用

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

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

最新評(píng)論