How to include typescript openlayers 3 external module?

Question

I want to try setting up a simple map in openlayers using typescript:

https://github.com/borisyankov/DefinitelyTyped/blob/master/openlayers/openlayers.d.ts

I take that file, put it into

/typings/openlayers/openlayers.d.ts

I have an app.ts file at the top in my root directory that I put:

import { Map } from "olx";

In my tsconfig.json, I've included the path to the openlayers.d.ts file. But I am gettting olx is not defined when I use the tsc command from npm's typescript package.

All I am going for is drawing a simple openlayers3 map, hope to not deviate from javascript too much if possible.

Willie Z · Accepted Answer · 2016-11-22 00:51:27Z

8

First install openlayers:

npm install openlayers

Then install types openlayers to your dev env:

npm install --save-dev @types/openlayers

To import I tried:

import * as ol from 'openlayers';

Then you can invoke anything in openlayers like this:

new ol.Map();

answered Nov 22, 2016 at 0:51

Willie Z

5067 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

basarat · Accepted Answer · 2015-07-16 23:44:23Z

0

import { Map } from "olx";

This will not work as there is no ambient external module called "olx". also olx refers to something else on NPM https://www.npmjs.com/package/olx so we recommend not using this name.

Recommend : https://www.npmjs.com/package/openlayers

With a definition file extended as:

declare module "openlayers" {
    export = olx;
}

answered Jul 16, 2015 at 23:44

basarat

278k61 gold badges475 silver badges528 bronze badges

3 Comments

Rolando Over a year ago

Why does the definition not contain the export = olx part? Or any export?

basarat Over a year ago

Because its designed for script tag inclusion and not an ES6 module exclusion. I guess what the module will be called if used with an external module loader wasn't established when the definition was written. See test file github.com/borisyankov/DefinitelyTyped/blob/master/openlayers/… for intended usage

Rolando Over a year ago

I am new to typescript, can you elaborate what you mean by script tag incluson and not an ES6 module exclusion? Do you mean someone would compile the openlayers.ts.d flle independently, then include it in the html page via script tag or use something in this question: stackoverflow.com/questions/14015899/…. If so, is your answer what should be "best practice/current" to manually add export = olx to the current definition? Or is there a better way for me to use openlayers without the typescript ts.d file? (seems like there are alot out-of-dateness)

Collectives™ on Stack Overflow

How to include typescript openlayers 3 external module?

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related