Búsqueda de sitios web

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.

Artículos relacionados