web-dev-qa-db-ja.com

angle2とtypescriptで動作するようにd3を設定する適切な方法

d3ライブラリをangle2 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.jstypescriptangular
13
cesarpachon

エラーメッセージから、タイプ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ファイルの仕組みに関する優れた紹介があります。

2
David Rinck

これで、次のようにタイピングをインストールできます。

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

その後、次のようにd3をインポートできます。

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

2017年の更新

インストール

D3のタイプのインストールv：

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

最新のd3バージョンのタイプのインストール（執筆中v4）：

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

使用法

import * as d3 from 'd3';
13
bersling

D3 V4で利用できるタイピングがないため、d3のd.tsを次のように手動で宣言する必要があります。

declare function d3(string: any): any;

D3ノードモジュールをインストールした後、次のファイルをインポートできます。

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

D3を直接インポートできるはずです：

import * as d3 from 'd3';

タイピングが適切にインストールされている限り（これがあなたの場合のようです）、実際のd3.jsファイルは、手動インポートまたはnode_modules/d3フォルダーを使用した前処理タスクによってロードされます。

また、d3.jsが誤って4.xバージョンにインポートされていないことを確認してください。このバージョンは、現在のdtタイピングに統合されていない多くの変更をもたらすためです。

2
jean-baptiste

ここにはさまざまな答えがあります。 Typed d3のステータスを維持するため。

現在、2017/12/09には、d3タイプが既にあり、最新バージョン4.12.0があります。したがって、バージョン3.xにダウングレードしたり、何かを宣言する必要はありません。

1
Mavlarn