ASP.NET Core MVC项目中TypeScript连接SignalR报TS2304错误求助

在ASP.NET Core MVC项目中已安装SignalR，且通过jQuery实现了示例功能，现在希望改用TypeScript实现相同功能，但编写的TypeScript代码无法连接SignalR，编译时报错：TS2304: (TS) Cannot find name 'signalR'。

相关代码与配置 #

视图代码 #

const a = "Hollo Word";
document.getElementById('textDiv').textContent = a;

var connection = new signalR.HubConnectionBuilder().withUrl("/CovidHub").build();
connection.start().then(() => {
    debugger;

}).catch((err) => {
    alert('Error:' + err);
});

@section Scripts{
    <script src="~/microsoft/signalr/dist/browser/signalr.min.js"></script>
    <script src ="~/js/TsConvertToJs/app.js"></script>
}
<div class="row">
    <div class="col-md-8 offset-2">
        <div class="row">
            <div class="col-12">
                <div id="textDiv"></div>
            </div>
        </div>
    </div>
</div>

TypeScript代码 #

var connection = new signalR.HubConnectionBuilder().withUrl("/CovidHub").build();
connection.start().then(() => {
    debugger;

}).catch((err) => {
    alert('Error:' + err);
});

tsconfig.json配置 #

{
  "compileOnSave": true,
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "outDir": "wwwroot/js/TsConvertToJs",
    "rootDir": "TypeScript"
  },
  "include": [
    "TypeScript/**/*"
  ]
}

libman.json配置 #

{
  "version": "1.0",
  "defaultProvider": "unpkg",
  "libraries": [
    {
      "library": "@microsoft/signalr@6.0.6",
      "destination": "wwwroot/microsoft/signalr/",
      "files": [
        "dist/browser/signalr.js",
        "dist/browser/signalr.min.js"
      ]
    }
  ]
}

package.json配置 #

{
  "dependencies": {
    "gulp": "4.0.2",
    "gulp-typescript": "5.0.1",
    "typescript": "5.0.0-dev.20230131"
  }
}

报错核心原因是TypeScript编译器无法识别全局signalR对象，缺少对应的类型定义文件，可按以下步骤解决：

1. 安装SignalR类型定义包
   在项目根目录执行命令，安装与你使用的SignalR版本（6.0.6）匹配的类型定义：

npm install @types/microsoft__signalr@6.0.6 --save-dev

2. 可选：明确指定类型引用
   若安装后仍报错，在tsconfig.json的compilerOptions中添加types字段，强制编译器加载SignalR类型：

"compilerOptions": {
  // 原有配置保留
  "types": ["microsoft__signalr"]
}

3. 确认脚本加载顺序
   确保视图中signalr.min.js的加载顺序在TypeScript编译后的app.js之前，当前你的视图配置已符合要求，保持即可。

4. 可选：改用模块化导入方式
   若偏好模块化开发，可通过npm直接安装SignalR包（替代LibMan）：

npm install @microsoft/signalr@6.0.6 --save

然后在TypeScript代码中直接导入使用（无需额外安装类型包，包内自带类型定义）：

import * as signalR from "@microsoft/signalr";

const connection = new signalR.HubConnectionBuilder().withUrl("/CovidHub").build();
connection.start().then(() => {
    debugger;
}).catch((err) => {
    alert('Error:' + err);
});

内容的提问来源于stack exchange，提问作者Alper Yazır