typescript 打字稿 - 使用类型定义导入与“声明 var”

Typescript - Import vs "declare var" with type definitions

提问by JMac

Building an Angular 2 app using Typescript, I am attempting to import the popular d3library.

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

I have installed the type definitions using TSD, and I am referencing the tsd.d.tsfile correctly:

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

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

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

Now, I want to importmy d3node_module. It was installed via NPM:

现在，我想要import我的d3node_module。它是通过NPM以下方式安装的：

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

This works, but I don't get any benefit from my type definitions. My IDE is not providing any type-ahead info or syntax highlighting. If I change it to this:

这有效，但我没有从我的类型定义中获得任何好处。我的 IDE 没有提供任何预先输入的信息或语法高亮。如果我把它改成这样：

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

I now get all of the syntax highlighting/type-ahead definitions that I am expecting. However, my app is looking for a file at node_modules/d3.jswhich doesn't exist, so this obviously doesn't work.

我现在得到了我期望的所有语法高亮/预先输入定义。但是，我的应用程序正在寻找一个node_modules/d3.js不存在的文件，所以这显然不起作用。

When I change my import statement to a vardeclaration, my app compiles correctly and I get all the appropriate typescript definitions:

当我将 import 语句更改为var声明时，我的应用程序将正确编译并获得所有适当的打字稿定义：

/// <reference path="../../../tools/typings/tsd/tsd.d.ts" />
declare var d3 = require('d3/d3');

So, my question is simply what is the right approach? What is the difference in importvs declare var, and is there a way to get type definitions when using importif they are not included in the npm module itself?

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

I've noticed things like import {Component} from 'angular2/core';work fine, but the type definitions are included within the same directory as the javascript file I am importing.

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

回答by SnareChops

import * as d3 from 'd3/d3';should work fine with the type system (without the ///<reference .../>) as long as the compiler options are correct, and the folder structure is correct in the typings folder.

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

declare var d3is how to declare a variable that exists somewhere in the JS. Think of it like "Yeah, yeah typescript, quit complaining, trust me it exists".

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

import {Component} from 'angular2/core';is how to pull a specific piece from a module. In node terms this translates to var Component = require('angular2/core').Component;

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

The important compiler option to have on is "moduleResolution": "node", which should already be on for angular2 to function.

要启用的重要编译器选项是"moduleResolution": "node"，它应该已经启用以使 angular2 正常工作。

So if d3was installed as a node_module then you should be able to simply use:

因此，如果d3作为 node_module 安装，那么您应该可以简单地使用：

npm install d3
tsd install d3
tsc

and it should just work.

它应该可以正常工作。

If you have installed d3 using bower, then you will need to use a relative path to the module instead.

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

bower install d3
tsd install d3

then

然后

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

NOTE: tsdhas been deprecated in favor of typings. Use typings install d3instead.

Additionally you can skip using tsdor typingsaltogether provided you have a recent version of typescript and npm install --save-dev @types/d3(this is officially supported by typescript, looking in node_modules/@types/...for typedefs

注意：tsd已被弃用以支持typings. 使用typings install d3来代替。

另外，你可以跳过使用tsd或typings干脆只要你有最近的打字稿的版本npm install --save-dev @types/d3（这是正式支持的打字稿，在寻找node_modules/@types/...为类型定义

man... typescript has grown up so much.... :)

伙计……打字稿长大了很多……:)