Use openlayers with typescript project

Question

I'm trying to use new ol (>6.0.0) on my project with typescript. In a previous versions I could just use it like this -

///<reference path='../@types/openlayers/index.d.ts'/>

And use global ol object e.g

ol.source.OSM()

But newer versions of ol don't really have this single object, but a number of modules. I try to reference path to folder with typings for new ol, but it doesn't really seem to work. On the other hand, when I try to import them e.g

import * as Map from 'ol/Map'

It says, that I have to use module:"system" or module:"AMD" in my typescript config. But is it the only way? My project structure is rather comples, and it would be hard to implement requirejs or systemjs. What's the best solution in this case?

UPD: I've added systemJS at my index.html. But there's a huge problem - whenever I try to import my js file, using systemjs it works quite fine - I can use all functions which are declared inside of it and so on. However, when I include any import into my file (e.g import {A} from "someconst"), systemjs stops working with tons of error messages. And I'm completely confused why is it like that.

A full build is still available openlayers.org/en/latest/doc/quickstart.html — Mike
– Mike, Commented Sep 29, 2020 at 10:47
Oh, true. But can I somehow use it with typescript? I mean, there are no typings :( — Aldres
– Aldres, Commented Sep 29, 2020 at 11:13

wlf · Accepted Answer · 2020-10-01 14:30:54Z

3

+50

The way you import has changed - do not use the ol namespace.

Import the types explicitly:

import { Map } from 'ol';
import { fromLonLat } from 'ol/proj';
import { Coordinate } from 'ol/coordinate';
// etc

Regarding typings, the official typings are not quite there yet, but I have found https://www.npmjs.com/package/@types/ol to work well.

answered Oct 1, 2020 at 14:30

wlf

3,4231 gold badge24 silver badges34 bronze badges

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

4 Comments

Aldres Over a year ago

Well, yes, I got this part. But I mean, for doing it this way I need to add requireJS or SystemJS in my project. And I kinda want to find another way if there's one

wlf Over a year ago

I'm not sure you do - check this stackblitz which only has ol and @types/ol packages: stackblitz.com/edit/so-ol-imports?file=index.ts .Unless stackblitz is handling it internally?

Aldres Over a year ago

Hmm, I guess, I can't do it this way, because my typescript configured to have an outputfile. Because of that it asks me to use module:"System" or module:"AMD" if I try to import/require modules

DylanSp Over a year ago

Do you absolutely need to have outFile set in your tsconfig? If you need a single output file, could you potentially use a bundler to create that after tsc does its work?

Collectives™ on Stack Overflow

Use openlayers with typescript project

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related