配置 d3 以使用 angular2 和 typescript 的正确方法答案

【问题标题】：proper way to configure d3 to work with angular2 and typescript配置 d3 以使用 angular2 和 typescript 的正确方法
【发布时间】：2017-12-09 18:07:46
【问题描述】：

试图将 d3 库包含到 angular2 typescript 项目中。我通过npm install d3添加了d3，通过typing install d3 --save添加了类型，项目本地服务器没有启动（tsc && concurrently "npm run tsc:w" "npm run lite"），出现以下错误：

typings/browser/definitions/d3/index.d.ts(3319,1): error TS2300: Duplicate identifier 'export='.
typings/browser/definitions/d3/index.d.ts(3323,1): error TS2300: Duplicate identifier 'export='.
typings/browser/definitions/d3/index.d.ts(3327,1): error TS2300: Duplicate identifier 'export='.
typings/modules/d3/index.d.ts(3319,1): error TS2300: Duplicate identifier 'export='.
typings/modules/d3/index.d.ts(3323,1): error TS2300: Duplicate identifier 'export='.
typings/modules/d3/index.d.ts(3327,1): error TS2300: Duplicate identifier 'export='.

这些是我的配置文件：

typings.json：

{
  "ambientDependencies": {
    "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd",
    "jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#5c182b9af717f73146399c2485f70f1e2ac0ff2b",
    "gapi": "github:DefinitelyTyped/DefinitelyTyped/gapi.auth2/gapi.auth2.d.ts"
  },
  "dependencies": {
    "d3": "registry:npm/d3#3.0.0+20160211003958"
  }
}

package.json:

{
  "name": "session-explorer",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.15",
    "systemjs": "0.19.26",
    "es6-shim": "^0.35.0",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "zone.js": "0.6.10",
    "d3": "^3.0.0"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings": "^0.7.12"
  }
}

【问题讨论】：

标签： d3.js typescript angular

【解决方案1】：

您现在可以按如下方式安装类型：

npm install d3 --save
npm install @types/d3 --save-dev

然后可以如下导入d3

import * as d3 from 'd3';

【讨论】：

【解决方案2】：

2017 年更新

安装

d3 v3的安装类型：

npm install d3@3.x --save
npm install @types/d3@3.x --save-dev

最新 d3 版本的安装类型（在编写 v4 时）：

npm install d3 --save
npm install @types/d3 --save-dev

用法

import * as d3 from 'd3';

【讨论】：

【解决方案3】：

由于没有可用于 D3 V4 的类型，我们必须手动为 d3 声明 d.ts 类似

declare function d3(string: any): any;

安装D3节点模块后，我们可以在文件中导入为

var d3: any = require('d3');

【讨论】：

太好了，它适用于 angular-cli 的最新版本（系统库已被删除的那个）！！！
@Petah 现在打字可用于 d3 (npm install @types/d3) 你可以使用它

【解决方案4】：

从错误消息看来，您需要排除您的输入 main.d.ts 和主目录。

我建议在您的 typings.json 文件所在的同一目录中添加一个 tsconfig.json。

tsconfig.json：

{
  "compilerOptions": {
      "target": "es5",
      "sourceMap": true,
      "experimentalDecorators": true,
      "emitDecoratorMetadata": true,
      "module": "commonjs",
      "noImplicitAny": false
  },
  "exclude": [
      "node_modules",
      "typings/main.d.ts",
      "typings/main"
  ]
}

angular documentation 很好地介绍了 tsconfig.json 文件的工作原理。

【讨论】：

感谢@drinck，实际上我通过删除typings和node_modules文件夹并重复安装以某种方式摆脱了错误，但后来我遇到了更多错误，最后一个错误是浏览器试图获取“d3/ index”通过 ajax，错误 400（使用 import * as d3 from 'd3/index'; 时）。最后，对我有用的更像是 hack：在 index.html 中包含 d3.js 文件并在组件 ts 文件中声明 var d3: any..
当它不起作用时，不应将其标记为正确答案:-) 通过将 d3 添加到索引来解决它的方式与询问的 npm 和类型问题不同跨度>

【解决方案5】：

你应该可以直接导入 d3 :

import * as d3 from 'd3';

只要正确安装了类型（这似乎是您的情况）并加载了实际的 d3.js 文件，无论是通过手动导入还是通过使用 node_modules/d3 文件夹的一些预处理任务。

还要确保在 4.x 版本中不会意外导入 d3.js，因为该版本带来了许多迄今为止尚未集成到 dt 类型中的更改。

【讨论】：

【解决方案6】：

这里有太多不同的答案。因为Typed d3的维护状态。

目前，2017/12/09，已经有 d3 类型，最新版本为 4.12.0。所以不需要降级到 3.x 版，或者声明一些东西。

【讨论】：