typescript 配置 d3 以使用 angular2 和打字稿的正确方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37276720/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
proper way to configure d3 to work with angular2 and typescript
提问by cesarpachon
trying to include d3 library into an angular2 typescript project. I added d3 via npm install d3and 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:
试图将 d3 库包含到 angular2 打字稿项目中。我添加了 d3 vianpm install d3和typings via 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='.
these are my config files:
这些是我的配置文件：
typings.json:
打字.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:
包.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"
}
}
采纳答案by David Rinck
From the error message it looks like you need to exclude your typings main.d.ts and main directories.
从错误消息看来，您需要排除输入 main.d.ts 和主目录。
I would suggest adding a tsconfig.json in the same directory where your typings.json file is located.
我建议在您的 Typings.json 文件所在的同一目录中添加一个 tsconfig.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"
]
}
The angular documentationhas a good introduction on how the tsconfig.json file works.
该角文档对tsconfig.json文件是如何工作的一个很好的介绍。
回答by Shuichi Ohtsu
You can now install typings as follows:
您现在可以按如下方式安装类型：
npm install d3 --save
npm install @types/d3 --save-dev
Then you can import d3 as follows
然后就可以按如下方式导入d3
import * as d3 from 'd3';
回答by bersling
The 2017 Update
2017 年更新
Installation
安装
Installing types for d3 v3:
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):
为最新的 d3 版本安装类型（在编写v4 时）：
npm install d3 --save
npm install @types/d3 --save-dev
Usage
用法
import * as d3 from 'd3';
回答by ShaMoh
As there is no typings available for D3 V4, we have to manually declare the d.ts for d3 some thing like
由于 D3 V4 没有可用的类型，我们必须手动声明 d3 的 d.ts 类似的东西
declare function d3(string: any): any;
After installing the D3 node module, we can import in file as
安装D3节点模块后，我们可以在文件中导入
var d3: any = require('d3');
回答by jean-baptiste
You should be able to import d3 directly with :
您应该可以直接使用以下命令导入 d3：
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.
只要类型已正确安装（这似乎是您的情况）并加载了实际的 d3.js 文件，无论是通过手动导入还是通过使用 node_modules/d3 文件夹的一些预处理任务。
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.
还要确保 d3.js 不会在 4.x 版本中意外导入，因为该版本带来了许多迄今为止尚未集成到 dt 类型中的更改。
回答by Mavlarn
There are too many different answers here. Because the maintain status of Typed d3.
这里有太多不同的答案。因为 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.
目前，2017/12/09，已经有d3类型，最新版本为4.12.0。所以不需要降级到 3.x 版，或者声明一些东西。
