MarkerCluster LeafletJS Plugin TypeScript Definition Dateierstellung

Question

Ich verwende LeafletJS, um Grundrisse zu erstellen. Ich habe vor kurzem ein wenig über TypeScript bei DevIntersection gelernt und wollte mit der Konvertierung meines gesamten JS beginnen, um es zu benutzen. Glücklicherweise hat jemand bereits die Definitionsdatei für Leaflet erstellt, aber eines der von mir verwendeten Plugins hat keins (MarkerCluster).

Ich habe das Plugin an den Punkt, wo es kompiliert (nach ein paar kleinen Ergänzungen der Prospektdefinitionsdatei), aber wenn ich versuche, es zu verwenden, sehe ich keine seiner Methoden (siehe Anwendungsbeispiel unten). Ich habe auch versucht, eine Definitionsdatei daraus zu erstellen, aber was erstellt wurde, war leer (mit tsc --declaration). Da die Definitionsdatei für Leaflet und das Plugin ist ein bisschen lang hochgeladen ich sie:

leaflet.d.ts, leaflet.markercluster.ts

Verbrauch:

/// <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) { } 

    } 
} 

Fehler:

The property 'MarkerClusterGroup' does not exist on value of type 'L'

Irgendwelche Ideen oder Führung Wohin geht es von hier?

Answer 1

Es gibt viele verschiedene Konventionen für „Klassen“ in JavaScript erstellen und Typoskript doesn‘ Ich weiß nichts über irgendwelche von ihnen. Was Sie in leaflet.markercluster.ts haben, ist legales JavaScript und daher legales TypeScript, aber es ist nicht in Klassen aufgeteilt, da TypeScript sie versteht und deshalb ist die dafür erzeugte Deklarationsdatei leer.

Außer in seltenen Fällen werden Deklarationsdateien von Hand erstellt, und das ist wahrscheinlich, was Sie hier tun müssen. Es wird wahrscheinlich so etwas wie dies beginnt:

/// <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 
    } 
} 

Ich hatte ein paar Erklärung Dateien selbst zu erstellen und nach einer kurzen Einarbeitungszeit ist es nicht zu hart. Ich fand this blog post, um sehr hilfreich für den Anfang zu sein (Requisiten für Steve, wenn Sie dies lesen) und dann lernen mit gutem Beispiel auf definitiv typisiert.

Sobald Sie mit Ihrer Deklarationsdatei zufrieden sind, erinnern Sie sich daran, zu definitiv flauschigen Gefühlen beizutragen.

Answer 2

leaflet.marketcluster.ts scheint nur JavaScript-Code zu sein, es enthält keine TypeScript-Klassendeklaration.

Sie sollten eine Definitionsdatei leaflet.marketcluster.d.ts statt (und lassen Sie das Original leaflet.marketcluster Code als nur JavaScript) erstellen:

declare module L { 

    export interface MarkerClusterGroupOptions { 
     maxClusterRadius?: number; 
     // etc. 
    }, 

    export class MarketClusterGroup extends FeatureGroup { 
     initialize(options: MarketClusterGroupOptions); 
     addLayer(layer: LayerGroup); 
     // etc. 
    } 

    // . . . etc. . . . 
} 

Answer 3

Es mir sah aus wie der Beitrag nie geschehen ist, so legte ich nur einen PR DefinitelyTyped für leaflet.markercluster diese warme und Fuzzy-Gefühl zu bekommen :)

die meisten gängigen Optionen hat aber offensichtlich würde lieben wenn jemand mehr hinzugefügt (und mehr Tests geschrieben!)

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