Typescript - 導入vs「聲明var」類型定義

Question

使用Typescript構建Angular 2應用程序，我試圖導入受歡迎的d3庫。

我已經安裝使用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'); 

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

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

Answer 1

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