打字稿和d3 [英] Typescript and d3
问题描述
我有一个使用d3库的应用.在打字稿代码中，为了成功使用d3(即在没有编译器错误TS2686的情况下，d3引用了UMD全局，但当前文件是一个模块)，我必须包括以下行:
import * as d3 from 'd3';
问题在于它发出:
require('d3');
在JavaScript中. d3库不在我们的应用程序中.它位于Web应用程序的根目录下，位于名为"d3"的目录中.另外，我根本不需要JavaScript，因为我们的index.html将其加载为全局变量.
很难弄清楚如何获取TypeScript源代码，以允许我在不导入的情况下引用d3.
I have an app that uses the d3 library. In typescript code, in order to use d3 successfully (i.e., without compiler error TS2686, d3 refers to a UMD global, but the current file is a module), I have to include the line:
import * as d3 from 'd3';
Problem with that is that it emits:
require('d3');
in the JavaScript. That's not where the d3 library is in our application. It's under the root of the web app, in a directory called 'd3'. Also, I don't need it in the JavaScript at all because our index.html loads it as a global.
Having a hard time figuring out how to get the TypeScript source to allow me to reference d3 without the import.
推荐答案
您有两个可能的选择:
截至 TypeScript 3.5和<添加了c2>标志，以允许您从模块文件访问全局定义.在您的情况下，这意味着您可以将d3用作全局名称空间，而不必使用import或require语句.显然，这将适用于您项目中的所有模块文件以及任何其他UMD类型定义(例如，React)，因此请注意，根据您的代码设置和使用的库，它不一定在所有情况下都是正确的.
As of TypeScript 3.5 a --allowUmdGlobalAccess flag was added to allow you to access global definitions from module files. In your case this will mean you can use d3 as a global namespace without having an import or require statement. This will obviously apply to all module files in your project and for any other UMD type definitions (like React, for example) so just be aware that it may not be correct in all contexts, depending on your code setup and libraries in use.
以前是TS 3.5且没有--allowUmdGlobalAccess标志的不能将UMD typedef引用为模块文件中的全局名称空间. (它仅允许您从非模块文件中引用全局名称空间.)这是一种故意的安全措施，可防止意外引用在严格基于模块的项目中不可用的全局名称空间. 解决方法是在项目中手动声明全局名称空间:
Previously to TS 3.5 and without the --allowUmdGlobalAccess flag UMD typedefs can't be referenced as a global namespace from within a module file. (It only allows you to reference a global namespace from a non-module file.) This is an intentional safe-guard against accidentally referring to a global namespace that is not available in a strictly module-based project. The workaround is to manually declare a global namespace within your project:
// global.d.ts
import * as _d3 from "d3";
declare global {
const d3: typeof _d3;
}
现在，您可以从模块中引用d3，而无需从"d3"进行导入，并且仍然应该基于@types/d3对d3对象进行所有正确的类型检查.
Now you can refer to d3 from modules without importing from "d3", and you should still get all the correct type checking on the d3 object based on @types/d3.
与--allowUmdGlobalAccess相比，它的优势在于它非常明确地说明了您的特定代码设置.换句话说，它不会无意间让您编译代码设置未全局提供的其他UMD模块.
This has the advantage over --allowUmdGlobalAccess in that it's very explicit about your particular code setup. In other words it won't inadvertently let you compile other UMD modules that your code setup is not providing globally.
这篇关于打字稿和d3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
