Question

尝试将d3库包含到angular2打字稿项目中。我通过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"
  }
}

Answer 1

您现在可以按如下方式安装打字：

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

然后您可以按如下方式导入d3

import * as d3 from 'd3';

Answer 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';

Answer 3

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

declare function d3(string: any): any;

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

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

Answer 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文件的工作原理。

Answer 5

您应该能够直接导入d3：

import * as d3 from 'd3';

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

同时确保不会在4.x版本中意外导入d3.js，因为此版本带来了许多尚未在今天的dt类型中集成的更改。

Answer 6

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

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

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

6 个答案: