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