How do I import from a `.d.ts` file?

Question

This line works in a project which uses angular2 RC4

import * as mapTypes from '../../../../node_modules/angular2-google-maps/core/services/google-maps-types.d.ts';

What's happening?

Now I am trying a new seed file with RC6 and the same line gives me this error

error TS2691: An import path cannot end with a '.d.ts' extension. Consider importing '../../../../node_modules/angular2-google-maps/core/services/google-maps-types' instead.

But if I make the suggested change, I get

Cannot find module '../../../../node_modules/angular2-google-maps/core/services/google-maps-types'

The .d.ts file looks like this:

/**
 * angular2-google-maps - Angular 2 components for Google Maps
 * @version v0.12.0
 * @link https://github.com/SebastianM/angular2-google-maps#readme
 * @license MIT
 */
export declare var google: any;
export interface GoogleMap {
    constructor(el: HTMLElement, opts?: MapOptions): void;
    panTo(latLng: LatLng | LatLngLiteral): void;
    setZoom(zoom: number): void;
    addListener(eventName: string, fn: Function): void;
    getCenter(): LatLng;
    setCenter(latLng: LatLng | LatLngLiteral): void;
    getBounds(): LatLngBounds;
    getZoom(): number;
    setOptions(options: MapOptions): void;
}
...

and the matching .ts file looks like

/**
 * angular2-google-maps - Angular 2 components for Google Maps
 * @version v0.12.0
 * @link https://github.com/SebastianM/angular2-google-maps#readme
 * @license MIT
 */
"use strict";

//# sourceMappingURL=google-maps-types.js.map

NOTE: There is a newer version of this package which is matched to RC6, but I should be able to get this to at least compile in TS

Answer 1

If you're using last versions of TypeScript and the typing definition is embedded in your npm package, then you can just import from the module :

import { GoogleMap } from 'angular2-google-maps/core/services/google-maps-types'

Even if it's an interface.

In fact you're importing the definition from core/services/googles-maps-types.js, but this file exists only to provide definition associated in its .d.ts file.

It's been made to work as if you were importing directly from a .ts file, but as you're in an npm module, they embed definition file to permit definitions imports.

Answer 2

Normally in TypeScript you would add a reference to the definition file at the top of your .ts file like this:

/// <reference path="../../../../node_modules/angular2-google-maps/core/services/google-maps-types.d.ts"

After that you can import stuff that is in the definition file.