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 eg

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 eg

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 (eg import {A} from "someconst"), systemjs stops working with tons of error messages. And I'm completely confused why is it like that.

Answer 1

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.