2016-01-25 33 views
8

使用Typescript構建Angular 2應用程序,我試圖導入受歡迎的d3庫。Typescript - 導入vs「聲明var」類型定義

我已經安裝使用TSD類型定義,而我正確地引用tsd.d.ts文件:

/// <reference path="../../../tools/typings/tsd/tsd.d.ts" />

現在,我想我的importd3 node_module。它是通過NPM安裝:

/// <reference path="../../../tools/typings/tsd/tsd.d.ts" /> 
import * as d3 from 'd3/d3'; 

這工作,但我不從我的類型定義得到任何好處。我的IDE沒有提供任何提前輸入信息或語法突出顯示。如果我將其更改爲:

/// <reference path="../../../tools/typings/tsd/tsd.d.ts" /> 
import * as d3 from 'd3/d3'; 

我現在可以獲得所期望的所有語法突出顯示/提前輸入定義。然而,我的應用程序正在尋找一個不存在的文件node_modules/d3.js,所以這顯然不起作用。

當我改變我的import語句到var聲明,我的應用程序正確編譯和我得到的所有合適的打字稿定義:

/// <reference path="../../../tools/typings/tsd/tsd.d.ts" /> 
declare var d3 = require('d3/d3'); 

所以,我的問題很簡單什麼是正確的做法? importdeclare var有什麼區別,如果import沒有包含在npm模塊中,有沒有辦法獲得類型定義?

我注意到像import {Component} from 'angular2/core';這樣的東西可以正常工作,但是類型定義包含在與我導入的JavaScript文件相同的目錄中。

+0

您正在使用什麼版本的打字稿的。 – SnareChops

+0

@JMac我想讓d3與TypeScript一起工作。你最終得到了這個工作嗎?你的項目是開源的嗎? – Ciwan

回答

10

import * as d3 from 'd3/d3';只要編譯器選項正確且typings文件夾中的文件夾結構正確,就應該可以正常使用類型系統(不包括///<reference .../>)。

declare var d3是如何聲明一個存在於JS中某處的變量。把它想成「是的,是的,打字稿,不要抱怨,相信我的存在」。

import {Component} from 'angular2/core';是如何從模塊中拉出特定的部分。在節點術語中,這轉換爲var Component = require('angular2/core').Component;

重要的編譯器選項是"moduleResolution": "node",它應該已經開啓以使angular2起作用。

所以,如果d3安裝爲node_module,那麼你應該能夠簡單地使用:

npm install d3 
tsd install d3 
tsc 

,它應該只是工作。

如果您已經使用bower安裝了d3,那麼您將需要使用模塊的相對路徑。

bower install d3 
tsd install d3 

然後

/// <reference path="../path/to/typings/d3/d3.d.ts" /> 
import * as d3 from '../path/to/d3'; 
+5

對於第一步打字稿的其他人(如我),'tsd'已被棄用,以支持'typings' – cesarpachon