ASP.NET Web Form页面从MicrosoftAjax.js迁移到MicrosoftAjax.ts的方法咨询

前置准备 #

• 已获取对应TypeScript版本的AJAX框架源码
• 本地已配置TypeScript编译环境（可直接使用Visual Studio自带的TypeScript编译能力）

操作步骤 #

步骤1：移除原有MicrosoftAjax.js引用 #

• 首先删除aspx页面中原有的手写script引入代码：<script src="../../Scripts/MicrosoftAjax.js"></script>
• 若你的项目通过ScriptManager控件自动引入MicrosoftAjax.js，需要修改ScriptManager配置禁用自动引入：

<asp:ScriptManager ID="ScriptManager1" runat="server" AjaxFrameworkMode="Disabled">
</asp:ScriptManager>

步骤2：编译TypeScript源码得到可运行JS文件 #

1. 将TypeScript版本的AJAX框架所有源码放入项目目录Scripts/TS/MicrosoftAjaxTS下
2. 在源码目录新增tsconfig.json配置文件，配置参考如下：

{
  "compilerOptions": {
    "target": "es5",
    "module": "none",
    "outFile": "../../MicrosoftAjaxTS.js",
    "strict": false,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

3. 执行tsc命令完成编译，会在Scripts目录下生成MicrosoftAjaxTS.js文件

步骤3：在aspx页面引入新的JS文件 #

在原MicrosoftAjax.js引用的同等位置，新增新文件的引入：

<script src="../../Scripts/MicrosoftAjaxTS.js"></script>

业务代码适配说明 #

该TypeScript移植版完全对齐原版MicrosoftAjax.js的API设计，原有调用$get、$find、Sys.Net.WebRequest等API的业务代码不需要做任何修改即可直接运行，示例如下：

// 原有AJAX请求代码可直接复用
function queryServerData() {
    var request = new Sys.Net.WebRequest();
    request.set_url("/ServerSide/GetData.ashx");
    request.set_httpVerb("POST");
    request.set_body("id=1&type=test");
    request.add_completed(function(executor) {
        if (executor.get_statusCode() === 200) {
            var res = JSON.parse(executor.get_responseData());
            document.getElementById("resultBox").innerText = res.content;
        }
    });
    request.invoke();
}

注意事项 #

• 如果你原有项目使用了UpdatePanel控件，需要确认移植版是否实现了UpdatePanel依赖的Sys.WebForms相关接口，若未实现可自行补充对应TS逻辑后重新编译，或移除UpdatePanel改用原生AJAX实现局部刷新
• 若有自定义的MicrosoftAjax扩展组件，可直接基于新的TS版本扩展，类型提示比原版JS更清晰

内容的提问来源于stack exchange，提问作者DotNetSpartan