typescript 和d3

p5cysglq  于 2023-01-03  发布在  TypeScript
关注(0)|答案(2)|浏览(287)

我有一个应用程序使用了d3库,在typescript代码中,为了成功地使用d3(也就是说,在没有编译错误TS2686的情况下,d3引用了UMD全局,但当前文件是一个模块),我必须包含以下行:import * as d3 from 'd3';问题在于它会发出:require('d3');。这不是d3库在我们的应用程序中的位置。它在Web应用程序的根目录下,在一个名为“d3”的目录中。此外,我根本不需要它在JavaScript中,因为我们的index.html加载它作为一个全局。很难弄清楚如何获得TypeScript源代码,使我能够引用d3,而无需导入。

oknwwptz

oknwwptz1#

您有两个可能的选项:

禁止显示警告

从TypeScript 3.5开始,添加了一个--allowUmdGlobalAccess标志,允许您从模块文件访问全局定义。在您的情况下,这意味着您可以使用d3作为全局命名空间,而无需使用importrequire语句。这显然适用于项目中的所有模块文件以及任何其他UMD类型定义(例如React),所以要注意,它可能不是在所有上下文中都正确,这取决于您的代码设置和使用的库。

声明全局名称空间

TS 3.5之前的版本,没有模块文件中的--allowUmdGlobalAccess标志UMD typedefs can't be referenced as a global namespace。(它只允许你从非模块文件中引用全局名称空间。)这是一个有意的安全措施,防止意外引用在严格基于模块的项目中不可用的全局名称空间。解决方法是在项目中手动声明全局名称空间:

// global.d.ts
import * as _d3 from "d3";

declare global {
  const d3: typeof _d3;
}

现在,您可以从模块引用d3,而无需从"d3"导入,并且您仍然应该基于@types/d3d3对象进行所有正确的类型检查。
--allowUmdGlobalAccess相比,它的优势在于它对特定的代码设置非常明确,换句话说,它不会无意中让您编译代码设置没有全局提供的其他UMD模块。

8i9zcol2

8i9zcol22#

Aaron Beall的上述回答非常适合op所处的特定情况,但更一般地说,如果您现在想在D3中使用TypeScript,DefinitelyTyped是最好的选择。

npm i d3
npm i -D @types/d3

以及

import * as d3 from 'd3';

与任何其他@types库一样。

相关问题