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

Question

使用Typescript构建Angular 2应用程序,我试图导入流行的d3库.

我已使用安装了类型定义TSD,并且我tsd.d.ts正确引用了该文件:

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

现在,我想要import我的d3node_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');

所以,我的问题是什么是正确的方法？importvs declare var有什么区别,有没有办法在使用时获取类型定义,import如果它们不包含在npm模块本身中？

我注意到import {Component} from 'angular2/core';工作正常,但类型定义包含在我导入的javascript文件所在的目录中.

Answer 1

import * as d3 from 'd3/d3';///<reference .../>只要编译器选项正确,并且文件夹结构在typings文件夹中是正确的,那么应该可以正常使用类型系统(没有).

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

注意:tsd已被弃用赞成typings.请typings install d3改用.

此外,如果你有最新版本的打字稿,你可以跳过使用tsd或typings完全不同npm install --save-dev @types/d3(这是打字稿正式支持,寻找node_modules/@types/...typedef

男人...打字稿已经长大了...... :)