CODEWITHSUNDEEP
d3.jstypescriptangular
cesarpachon
cesarpachon

Reputation: 1213

proper way to configure d3 to work with angular2 and typescript

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"
  }
}

Upvotes: 13

Views: 20371

Answers (6)

Mavlarn
Mavlarn

Reputation: 3883

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.

Upvotes: 1

bersling
bersling

Reputation: 19272

The 2017 Update

Installation

Installing types for d3 v3:

npm install [email protected] --save
npm install @types/[email protected] --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';

Upvotes: 15

Shuichi Ohtsu
Shuichi Ohtsu

Reputation: 351

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

Upvotes: 35

ShaMoh
ShaMoh

Reputation: 1570

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

Upvotes: 5

jean-baptiste
jean-baptiste

Reputation: 714

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.

Upvotes: 2

David Rinck
David Rinck

Reputation: 6986

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.

Upvotes: 2

Related Questions