配置d3以与angular2和打字稿一起使用的正确方法

Question

trying to include d3 library into an angular2 typescript project. I added d3 via npm install d3 and the typings via typing install d3 --save , the project local server doesn't start ( tsc && concurrently "npm run tsc:w" "npm run lite" ), with the following error:

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='.

these are my config files:

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

You can now install typings as follows:

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

Then you can import d3 as follows

import * as d3 from 'd3';

Answer 2

The 2017 Update

Installation

Installing types for d3 v3 :

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

Installing types for the latest d3 version (at the moment of writing v4 ):

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

Usage

import * as d3 from 'd3';

Answer 3

As there is no typings available for D3 V4, we have to manually declare the d.ts for d3 some thing like

declare function d3(string: any): any;

After installing the D3 node module, we can import in file as

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

Answer 4

From the error message it looks like you need to exclude your typings main.d.ts and main directories.

I would suggest adding a tsconfig.json in the same directory where your typings.json file is located.

tsconfig.json:

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

The angular documentation has a good introduction on how the tsconfig.json file works.

Answer 5

You should be able to import d3 directly with :

import * as d3 from 'd3';

as long as the typings have been properly installed (which seems to be your case) and the actual d3.js file is loaded, either with a manual import or through some preprocessing task using node_modules/d3 folder.

Also make sure that d3.js is not accidentally imported in 4.x version, as this version brings many changes that have not been integrated in the dt typings as of today.

Answer 6

There are too many different answers here. Because the maintain status of Typed d3.

For now, 2017/12/09, there is already d3 type, with latest version 4.12.0. So no need to downgrade to version 3.x, or declare something.