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

只要编译器选项正确，并且typings文件夹中的文件夹结构正确，

///<reference .../>就可以正常使用类型系统（没有declare var d3）。

import {Component} from 'angular2/core';是如何声明JS中某处存在的变量。把它想象成＆＃34;是的，是的打字稿，放弃抱怨，相信我它存在＆＃34;。

var Component = require('angular2/core').Component;是如何从模块中提取特定部分的。在节点术语中，这会转换为"moduleResolution": "node"

要使用的重要编译器选项是d3，它应该已经打开，以使angular2正常运行。

因此，如果将npm install d3 tsd install d3 tsc安装为node_module，那么您应该可以简单地使用：

bower install d3
tsd install d3

它应该可以正常工作。

如果您使用bower安装了d3，那么您将需要使用模块的相对路径。

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

然后

tsd

注意：typings已被弃用，转而使用typings install d3。请改用tsd。

此外，如果你有最新版本的打字稿和typings，你可以完全跳过使用npm install --save-dev @types/d3或node_modules/@types/...（这是打字稿正式支持，查看set_time_limit(0);类型定义

男人...打字稿已经长大了......：）

打字稿 - 使用类型定义导入vs“declare var”

1 个答案: