如何在Visual Studio 2019 Blazor项目中使用TypeScript Typings声明文件

前置准备 #

确保你已经在Blazor项目中安装了Microsoft.TypeScript.MSBuild NuGet包，项目框架为.NET 5。

步骤1：初始化npm配置 #

TypeScript的@types声明包依赖npm管理，你需要先在项目根目录生成package.json：
打开VS2019的开发者命令行，切换到Blazor项目根目录，执行命令：
npm init -y
执行完成后根目录会生成package.json文件。

步骤2：安装官方@types声明包 #

和你之前开发Aurelia项目的用法一致，直接通过npm将需要的类型声明包安装到开发依赖即可，比如需要安装lodash的类型声明，执行命令：
npm install @types/lodash --save-dev
安装完成后，声明文件会自动存放到node_modules/@types/路径下，TypeScript默认会扫描该路径下的所有声明文件。

步骤3：配置tsconfig.json #

在项目根目录右键，选择「添加」→「新项」，搜索并添加「TypeScript 配置文件」，生成tsconfig.json，修改核心配置如下：

{
  "compileOnSave": true,
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "outDir": "./wwwroot/js", // 编译后的JS输出到Blazor静态资源目录，可自定义
    "typeRoots": [
      "./node_modules/@types", // 官方@types包扫描路径
      "./CustomTypings" // 可选：自定义声明文件存放目录，按需配置
    ],
    "esModuleInterop": true,
    "skipLibCheck": true,
    "strict": false // 可根据你的编码规范调整严格模式开关
  },
  "include": [
    "./Scripts/**/*" // 你的TS源码存放路径，按需修改
  ],
  "exclude": [
    "node_modules",
    "bin",
    "obj"
  ]
}

提示：如果你有非npm来源的自定义.d.ts声明文件，直接放到上面配置的CustomTypings目录即可，编译器和编辑器都会自动识别。

步骤4：验证编译与识别效果 #

Microsoft.TypeScript.MSBuild会自动关联项目生成流程，不需要额外修改csproj配置，直接生成项目就能触发TS编译，同时VS2019编辑器会自动读取tsconfig的配置识别类型，不会再报外部模块找不到类型的错误。

异常排查 #

• 若编辑器仍识别不到类型：右键点击tsconfig.json选择「包括在项目中」，重启VS即可生效。
• 若项目生成时没有触发TS编译：在csproj文件中手动添加配置<TypeScriptCompile Include="Scripts/**/*.ts" />即可。

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