Init an OpenLayers Map object with TypeScript

map.component.ts

private initilizeMap(): void {
    //
    // Create placeholders for markers
    //
    this.markers = [];
    for (let i = 0; i < MapComponent.MaxNumMarkers; i++) {
        this.markers.push(new Feature({}));
    }

    this.userMarker = new Feature();

    //
    // Create a map with an OpenStreetMap-layer,
    // a marker layer and a view
    var attribution = new Attribution({
        // Attach the attribution information
        // to an element outside of the map
        target: 'attribution'
    });
    const markersLayer = new VectorLayer({
        source: new Vector({ features: this.markers })
    });
    this.map = new Map({
        controls: defaultControls({ attribution: false }).extend([attribution]),
        target: 'map',
        layers: [
            new TileLayer({ source: new OSM() }),
            markersLayer,
            new VectorLayer({
                source: new Vector({ features: [this.userMarker] })
            })
        ],
        view: new View({
            center: fromLonLat([0, 0]),
            zoom: MapComponent.ZoomLevelSingleMarker
        })
    });

    setupMarkerClickHandler(this.map, markersLayer, this.markers, (id) => this.onMarkerClicked.emit(id));
}