Typescript - Import vs "declare var" with type definitions
<p>Building an Angular 2 app using Typescript, I am attempting to import the popular <code>d3</code> library.</p>

<p>I have installed the type definitions using <code>TSD</code>, and I am referencing the <code>tsd.d.ts</code> file correctly:</p>

<p><code>/// &lt;reference path="../../../tools/typings/tsd/tsd.d.ts" /&gt;</code></p>

<p>Now, I want to <code>import</code> my <code>d3</code> node_module. It was installed via <code>NPM</code>:</p>

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

<p>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:</p>

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

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

<p>When I change my import statement to a <code>var</code> declaration, my app compiles correctly and I get all the appropriate typescript definitions:</p>

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

<p>So, my question is simply what is the right approach? What is the difference in <code>import</code> vs <code>declare var</code>, and is there a way to get type definitions when using <code>import</code> if they are not included in the npm module itself?</p>

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