intelliJ 中的 d3.js 和 typescript：导入问题答案

【问题标题】：d3.js and typescript in intelliJ: import problemintelliJ 中的 d3.js 和 typescript：导入问题
【发布时间】：2019-09-08 21:47:59
【问题描述】：

当我在打字稿代码中使用 d3.select() 时浏览器控制台中的错误。我尝试了其他方法，例如 d3-timer.now() 并遇到了同样的问题。

我是打字稿的新手。我正在使用 IntelliJ Ultimate 2019.1。我用 npm 下载了大量的东西，所以我的 intelliJ 项目视图显示 node_modules 包含 .bin @types 指挥官 d3 d3 数组 ... d3-选择 ...

intelliJ 在其文档视图中显示所有类似 javadoc 的文档（在 Ctrl-Q 之后），因此这些类型似乎很好地关联起来。 :-)

// index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My title</title>
    <script>var exports = {};</script>
    <script type=module src=ts1.js></script>
</head>
<body>
<p>test output from me</p>
</body>
</html>

// ts1.ts
import * as d3 from 'd3';
import * as d3selecter from 'd3-selection';   // Possibly rubbish?

let d:d3.Primitive = 'hello';   // Works fine! :-) Proving typescript is working
console.log(d.toString());      // Ditto. :-)

d3.select("p").style("fill", "red");           // Causes error
d3selecter.select("p").style("fill", "red");   // Causes error

// tsconfig.json (which I don't understand)
{
  "compilerOptions": {
    "target": "es6",
    "sourceMap": true
  },
  "exclude": [
    "node_modules"
  ]
}

d3-selection 在以下文件中没有帮助

// package.json
{
  "name": "T5D3",
  "version": "1.0.0",
  "dependencies": {
  "d3": "^5.7.1",
    "d3-selection": "^1.4.0"
},
  "devDependencies": {
    "@types/d3": "^5.7.1"
  }
}

Firefox 和 Chrome 控制台中的错误是“未捕获的类型错误：无法解析模块说明符“d3”。相对引用必须以“/”、“./”或“../”开头。" 它仅在我尝试使用 d3.select 或 d3selecter.select 时出现。我尝试将这些前缀放在不同的地方，但没有效果。

【问题讨论】：

标签： javascript typescript d3.js intellij-idea ecmascript-6

【解决方案1】：

您在 html 中引用 ts1.js 并在 ts 代码上方的评论中将其称为 ts1.ts 是否是错字？我假设是这样，因为 ts 代码正在运行。

你有没有尝试添加

<script src="/whereEverYoureGettingD3From"></script>

到你的html？

【讨论】：

不，这不是错字。 intelliJ 将 .ts 转换为 .js，位于与 .ts 相同的文件夹中。 “/whereEverYoureGettingD3From”是什么意思？
.ts、.js 和 .html 文件都在同一个文件夹中。
我的意思是喜欢<script src="https://d3js.org/d3.v5.min.js"></script> 或<script src="/yourFileDirectory/staticD3file(i.e. whatever the filename and path is)"></script>
谢谢，我试过了，但没有任何改变。你知道多少打字稿？当然 tsconfig 和包文件正在执行您的建议的目的吗？如您所见，转译器知道 d3.Primitive。 IntelliJ 知道的更多，正如 Ctrl-Q 显示文档所证明的那样。
我不太了解 ts，但我在日常工作中确实使用 d3 和 js，但没有专家。目前正在开发 node.js/d3/electron 应用程序，如果该导入不是' t 在 html 中，js 引擎不知道 d3 是什么。不过，我会假设您对原语的看法是正确的。