打字稿：如何使用命名空间中的类或接口

Question

I want to extend a class defined in the namespace google.maps in this file:

@types/googlemaps/index.d.ts

class MyMarker extends google.maps.Marker {
  constructor(options: google.maps.MarkerOptions){
    super(options);
  }
}

This transpiles without errors. But on runtime, I get an error in the constructor because the google.maps global is still undefined.

What am I doing wrong?

Answer 1

You need to import it first, for example

import Marker from 'googlemaps';

class MyMarker extends Marker 

Answer 2

BTW, my fallback is to use an interface instead of class and do a bunch of TS typecast gymnastics. It works but it's not optimal...

// new google.maps.Marker for MarkerClusterer
export interface UuidMarker extends Marker {
  uuid: string;
}

/**
 * Hack: "extend" google.maps.Marker to include uuid property
 *  guard with this.ready.then() to ensure google.maps is loaded
 */
function UuidMarkerFactory(uuid: string, options?: MarkerOptions) : Promise<UuidMarker> {
  return this.ready.then( ()=>{
    let gmOptions = options as any as google.maps.MarkerOptions;
    const marker = new google.maps.Marker( gmOptions );
    marker['uuid'] = uuid;
    return marker as any as UuidMarker;
  })
}