如何在 ASP.NET MVC 应用程序中将 d3 (v4) 导入打字稿？

Question

我在 Visual Studio 2015 中构建了一个 ASP.NET MVC 应用程序，并包含了几个 javascript 库。 jquery 旁边最重要的是 d3（在某些页面上是 v4 和部分 v3）。 现在我深入研究 Typescript（这对我来说很新）。

在我详细介绍之前，这里是我的问题：从 JS 切换到 TS 最简单的方法是什么以及如何处理 moment.js、d3.js 和其他依赖项？

很遗憾，我无法将 d3 模块包含到我的 .ts 文件中。如果尝试通过import * as d3 from 'd3'; 包含它，它会显示“找不到模块 d3”

我还尝试使用类型定义文件，将它们手动加载到项目中并通过 npm (npm install @types/d3 --save-dev) 下载。他们都没有工作。可能我误解了它的工作原理或应该如何工作。

在这个问题解决之后，我也必须处理 AMD 或 CommonJS。您能否推荐一个不需要对我的项目进行多次额外安装的简单解决方案？

非常感谢，如果我不够精确，请原谅（这是我关于 SO 的第一个问题）。

Answer 1

当您import * as d3 from 'd3'; 时，您需要仅在您的node_modules 本地可用的 d3 包，因此无法在浏览器中运行。那是依赖错误（例如webpack）的出现，它们通过您的代码读取所有必需的包并将它们包含在您的构建输出中。但是，既然您说您是 Node.js 和 TypeScript 的新手，我必须警告您，使用这些工具配置项目可能非常困难，而且学习曲线相当陡峭。对您的项目需求进行研究，如果您发现在某个时候需要它，请尽快开始学习如何使用 webpack，因为稍后调整您的代码可能会更加痛苦。

另一种选择是以老式方式（使用普通脚本标签）包含 jQuery 和 D3.js。在这种情况下，为了让 TypeScript 识别 jQuery 和 D3，即使它们是分开加载的，我们使用我们所谓的“环境声明”。这些声明公开了这些库的全局变量下的定义，因此 TypeScript 假定全局 d3 或 $ 变量将在运行时可用，并将保存我们想要的库的 API。因此不需要import。

谢天谢地，“@types/jquery”和“@types/d3”都已经包含了这些全局声明。对于 D3，请确保您使用 npm i --save-dev @types/d3@4.x 安装 v4 的定义

使用 vanilla 依赖项可能需要的另一个步骤是对您的 tsconfig.json 文件进行一些调整。这是一个例子：

{
  "compileOnSave": false,
  "buildOnSave": false,
  "compilerOptions": {
    "target": "es5",
    "module": "amd",
    "moduleResolution": "classic",
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "d3",
      "jquery"
    ]
  }
}

注意module 和moduleResolution 和pick the options 更适合你。还要注意 types 选项使 TypeScript 包含来自 @types/d3 和 @types/jquery 的环境声明。顺便说一下，这些选项适用于 TypeScript 2.0。

老实说，我很难说出你需要做什么才能让一切正常运行，因为每个上下文都需要不同的设置。但我希望我至少能让你找到正确的方向，让你自己弄清楚剩下的事情。祝你好运！