web-dev-qa-db-fra.com

bonne façon de configurer d3 pour fonctionner avec angular2 et dactylographie

essayer d'inclure la bibliothèque d3 dans un projet TypeScript angular2. J'ai ajouté d3 via npm install d3 et les saisies via typing install d3 --save, le serveur local du projet ne démarre pas (tsc && concurrently "npm run tsc:w" "npm run lite"), avec l'erreur suivante: 

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

ce sont mes fichiers de configuration: 

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.jstypescriptangular
13
cesarpachon

D'après le message d'erreur, il semble que vous deviez exclure vos saisies main.d.ts et les répertoires principaux.

Je suggérerais d'ajouter un tsconfig.json dans le même répertoire que votre fichier typings.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"
  ]
}

La angular documentation contient une bonne introduction sur le fonctionnement du fichier tsconfig.json.

2
drinck

Vous pouvez maintenant installer des saisies comme suit:

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

Ensuite, vous pouvez importer d3 comme suit

import * as d3 from 'd3';
30
Shuichi Ohtsu

La mise à jour 2017

Installation

Installation de types pour d3 v3 :

npm install [email protected] --save
npm install @types/[email protected] --save-dev

Installation des types pour la dernière version d3 (au moment de l’écriture v4 ):

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

Utilisation

import * as d3 from 'd3';
13
bersling

Comme il n’existe pas de frappe pour D3 V4, nous devons déclarer manuellement le fichier d.ts pour d3, par exemple 

declare function d3(string: any): any;

Après avoir installé le module de noeud D3, nous pouvons importer dans le fichier en tant que 

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

Vous devriez pouvoir importer directement d3 avec:

import * as d3 from 'd3';

tant que les typages ont été correctement installés (ce qui semble être votre cas) et que le fichier d3.js est chargé, avec une importation manuelle ou via une tâche de prétraitement utilisant le dossier node_modules/d3.

Assurez-vous également que d3.js n'est pas importé accidentellement dans la version 4.x, car cette version apporte de nombreuses modifications qui n'ont pas été intégrées dans les typages dt à ce jour.

2
jean-baptiste

Il y a trop de réponses différentes ici. Parce que le statut de maintien de Typed d3.

Pour l'instant, 2017/12/09, il existe déjà le type d3, avec la dernière version 4.12.0. Donc, pas besoin de passer à la version 3.x, ou de déclarer quelque chose.

0
Mavlarn