michael michael - 2 months ago 44
TypeScript Question

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

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

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.


Comments