如何在ASP.NET Core项目的.ts文件中使用开源TypeScript库

解决步骤 #

1. 修正tsconfig.json配置

你当前报错的核心原因是tsconfig.json中关闭了Node模块解析规则，导致TypeScript无法正确识别npm包的路径和自带的类型声明，修改配置如下：

{
  "compileOnSave": true,
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "module": "ES2015",
    "moduleResolution": "node", // 取消这行的注释，开启Node模块解析
    "outDir": "wwwroot/js",
    "typeRoots": ["./node_modules/@types", "./node_modules"] // 新增这行，指定类型声明查找路径
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ],
  "include": [
    "scripts/**/*"
  ]
}

这里exclude配置保留node_modules即可，不需要编译库的源码，只要让TS能找到类型声明就行。

2. 正确引入库

删除你之前写的/// <reference path=引用语句，直接按照官方文档写法引入即可：

import * as Tone from 'tone';

// 测试代码，可直接运行不会再报找不到名称的错误
const synth = new Tone.Synth().toDestination();
synth.triggerAttackRelease("C4", "8n");

3. 静态资源复制到wwwroot

你不需要编译库源码，直接用npm包内已经构建好的产物即可，两种常用方案：

• 手动复制：将node_modules/tone/build/Tone.min.js和对应的map文件复制到wwwroot/lib/tone目录下，在页面中通过script标签引入后即可使用。
• 自动复制：如果不想每次更新包都手动复制，可以在ASP.NET Core项目的csproj文件中加入生成事件，编译时自动复制对应文件到wwwroot。

常见疑问说明 #

不需要引入库的完整TypeScript源码，这类TS编写的开源库本身已经自带了完整的.d.ts类型声明，只要模块解析配置正确，TypeScript就能自动识别类型，不需要额外手动引用d.ts文件。

内容的提问来源于stack exchange，提问作者g.pickardou