Búsqueda de sitios web

folleto - archivo de definición TypeScript del complemento MarkerCluster de LeafletJS

Estoy usando LeafletJS para mapear planos de planta. Recientemente aprendí un poco sobre TypeScript en DevIntersection y quería comenzar a convertir todo mi JS para usarlo. Por suerte, alguien ya creó el archivo de definiciones para Leaflet, pero uno de los plugins que uso no tiene uno (MarkerCluster).

Tengo el plugin hasta el punto en que se compila (después de algunas pequeñas adiciones al archivo de definición de Leaflet), pero cuando intento usarlo no veo ninguno de sus métodos (ver ejemplo de uso abajo). También intenté crear un archivo de definición a partir de él, pero lo que creó estaba vacío (usando tsc --declaration). Dado que el archivo de definición de Leaflet y del plugin son un poco largos, los subí:

leaflet.d.ts , leaflet.markercluster.ts

Uso :

/// <reference path="typings/jquery/jquery.d.ts" />
/// <reference path="typings/jqueryui/jqueryui.d.ts" />
/// <reference path="typings/leaflet/leaflet.d.ts" />
/// <reference path="typings/leaflet.markercluster.ts" />

module FloorPlans
{
    export class Floor
    {
        deskMarkers : L.MarkerClusterGroup; // <-- Compile error
        peopleMarkers: L.MarkerClusterGroup; // <-- Compile error
        tileLayer: L.TileLayer;
        desks = new Object();
        people = new Object();

        constructor(public floorName: string, public floorID: number) { }

    }
}

Error :

La propiedad 'MarkerClusterGroup' no existe en el valor de tipo 'L'

¿Alguna idea o guía sobre a dónde ir desde aquí?

Respuesta #1

Hay muchas convenciones diferentes para crear "clases" en JavaScript, y TypeScript no sabe nada sobre ninguna de ellas. Lo que tienes en leaflet.markercluster.ts es JavaScript legal y, por lo tanto, TypeScript legal, pero no está dividido en clases tal como TypeScript las entiende, y por eso el archivo de declaración generado para él está vacío.

Excepto en casos raros, los archivos de declaración se crean a mano, y probablemente eso es lo que tendrás que hacer aquí. Probablemente empezará algo así:

/// <reference path="leaflet.d.ts" />
declare module L {
    export class MarkerClusterGroup extends FeatureGroup {
        initialize(options: any): void;
        addLayer(layer:ILayer):MarkerClusterGroup;
        addLayer(layer:LayerGroup):MarkerClusterGroup;
        // and so on and so forth
    }
}

He tenido que crear un par de archivos de declaración yo mismo y, después de una breve curva de aprendizaje, no es tan difícil. Encontré este artículo de blog muy útil para empezar (créditos a Steve si estás leyendo esto) y luego aprender por ejemplo en DefinitelyTyped.

Una vez que estés contento con tu archivo de declaración, recuerda contribuir de vuelta a definitelytyped para sentirte bien.

Respuesta #2

Me pareció que la contribución nunca había ocurrido, así que simplemente envié un PR a DefinitelyTyped para leaflet.markercluster para obtener esas sensaciones cálidas y agradables :)

Tiene la mayoría de las opciones comunes, pero obviamente le encantaría que alguien agregara más (¡y escribiera más pruebas!)

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/leaflet.markercluster/index.d.ts

Para usar esto, ejecute:

npm install --save-dev @types/leaflet.markercluster

y agrega las siguientes importaciones:

import "leaflet.markercluster";
import "leaflet.markercluster/dist/MarkerCluster.css";
import "leaflet.markercluster/dist/MarkerCluster.Default.css";

Artículos relacionados