Extender el marcador de Leaflet con Typescript
Estoy trabajando en un proyecto con Typescript y Leaflet.
La forma documentada (JS) de ampliar el marcador de Leaflet es así:
L.Marker.Foo = L.Marker.extend({...});
Sin embargo, Typescript se queja:
Property 'Foo' does not exist on type 'typeof Marker'.
¿Cómo puedo cambiarlo para que no haya errores de compilación?
Respuesta #1
Extiende el marcador así:
export class TSMarker extends L.Marker {
options: L.MarkerOptions
constructor(latLng: LatLngExpression, options?: L.MarkerOptions) {
super(latLng, options)
}
greet(): this {
this.bindPopup("Hello! TSX here!")
return this
}
}
Src
Respuesta #2
Está bien, así que he estado lidiando con esto y creo que lo tengo solucionado:
Digamos que tengo esto:
// MyExtendedMarker.ts
const MyExtendedMarker = Marker.extend({
foo: function() {
// do stuff
},
bar: "hello!"
})
Luego creé en mi index.d.ts lo siguiente:
// index.d.ts
/// <reference types="leaflet" />
declare class MyExtendedMarker extends L.Marker {
foo(): void;
bar: string;
}
Cuando luego fui a usar mi clase creada, tenía las clases correctas. Incluso terminé cambiando el constructor para pasar mi propio tipo para las opciones (que también extendí).
Evité deliberadamente el nuevo estilo de class MyExtendedMarker extends Marker ya que eso va en contra de cómo Leaflet lo recomienda, ya que sus clases son clases de estilo ES5.
