michael michael - 1 year ago 86
Javascript Question

How do you extend a class in Typescript that is loaded dynamically

I'm using the google maps JS API together with the

namespace via
npm install @types/googlemaps
. I believe the API is loaded dynamically so the
JS global is not available immediately.

But I don't understand why I get the runtime error:
Uncaught ReferenceError: google is not defined
when I try to extend
with a
but not an

// No problem!
export interface UuidMarker extends google.maps.Marker {
uuid: string;

// Uncaught ReferenceError: google is not defined!!
export class UuidMarker0 extends google.maps.Marker {
uuid: string;
constructor(uuid: string, options?: gmMarkerOptions) {
this.uuid = uuid;

What is the best practice for extending a class that loaded dynamically?

Additional Info

I'm using
which uses
to bundle all the modules. All my typescript and
are bundled into a single
script with source maps. The actual google maps API is loaded by the

If I extend using an
(which seems more typescript "friendly") what pattern can I use to create an object that fits the

Answer Source

In the compilation process you're not getting any errors because the compiler has access to the google.maps definitions that you installed using @types.

However, in runtime your file is probably being loaded before the google.maps library has loaded and so the interpreter can't find the google.maps.Marker object.

You need to load your file only after you know that the google.maps file has loaded successfully.

You don't get runtime errors for the UuidMarker interface because it does not exist in runtime.
Interfaces don't exist in javascript, they are only used by the typescript compiler and are not being "translated" into js.

You can do a trick by placing the class definition inside a function.
This way the interpreter won't execute it before this function is called, which can be after the google maps lib has loaded:

interface UuidMarker extends google.maps.Marker {
    uuid: string;

let UuidMarker0: { new (uuid: string, options?: gmMarkerOptions): UuidMarker };

function classLoader() {
    UuidMarker0 = class UuidMarker0 extends google.maps.Marker implements UuidMarker {
        uuid: string;

        constructor(uuid: string, options?: gmMarkerOptions) {
            this.uuid = uuid;

(playground code which simulates this)

Another approach, is to drop the class as you suggested and just do:

function UuidMarker(uuid: string, marker: google.maps.Marker): google.maps.Marker & { uuid: string } {
    return Object.assign(marker, { uuid });


This syntax:

type MyType = google.maps.Marker & { uuid: string };

Is called Intersection Types and it means that MyType has everything that google.maps.Marker has plus the uuid property.

A simple example:

interface Point {
    x: number;
    y: number;

type Point3D = Point & { z: number };

let p1: Point = { x: 0, y: 0 };
let p2: Point3D = { x: 0, y: 0, z: 0 };
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download