Working with openlayers and typescript classes

/// <reference path="openlayers.d.ts" />

class MapComponent {
    element: HTMLElement;
    map: OpenLayers.Map;

    constructor(element: HTMLElement) {
        // Setup our map object
        this.element = element;
        this.map = new OpenLayers.Map(this.element);
    }

    init() {
        // Setup our two layer objects
        var osm_layer_map = new OpenLayers.Layer.OSM("OSM");

        // Add layers to the map
        this.map.addLayers([osm_layer_map]);

        // Add a layer switcher control
        this.map.addControl(new OpenLayers.Control.LayerSwitcher({}));

        // Zoom the map to the max extent
        if (!this.map.getCenter()) {
            this.map.zoomToMaxExtent();
        }
    }
}

window.onload = () => {
    var el = document.getElementById('map');
    var mc = new MapComponent(el);
    mc.init();
}

I have the above piece of code to work with a simple HTML file with only 1 of ID, 'map' with style: height and width @ 500px.

I have tried several other ways to get the map to display but so far all i got was a white page (blank).

Can anybody point me in the right direction?

Solutions tried so far:

• using jquery with ready function

• replace window.onload with a call direct from the html, <script><script/>

• place document.getElementById() in the new OpenLayers.Map(here); when first creating this.map

• placing the window.onload call above and below (currently)

• using export class or public init() or both

As of now, I just want it to work.