Typescript - 导入与带有类型定义的“declare var”

Question

使用 Typescript 构建一个 Angular 2 应用程序，我正在尝试导入流行的 d3 库。

我已经使用TSD 安装了类型定义，并且我正确地引用了tsd.d.ts 文件：

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

现在，我想import 我的d3 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 有什么区别，如果 npm 模块本身不包含 import 时，有没有办法获取类型定义？

我注意到像 import {Component} from 'angular2/core'; 这样的东西可以正常工作，但是类型定义包含在与我要导入的 javascript 文件相同的目录中。

Answer 1

import * as d3 from 'd3/d3'; 应该可以在类型系统（没有 ///<reference .../>）下正常工作，只要编译器选项正确，并且类型文件夹中的文件夹结构正确。

declare var d3 是如何声明一个存在于 JS 中某处的变量。把它想象成“是的，打字稿，停止抱怨，相信我它存在”。

import {Component} from 'angular/core'; 是如何从模块中提取特定部分。在节点方面，这转换为var Component = require('angular/core').Component;

要启用的重要编译器选项是 "moduleResolution": "node"，它应该已经启用才能使 angular 起作用。

所以如果 d3 被安装为 node_module 那么你应该可以简单地使用：

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

然后

import * as d3 from 'd3';