MarkerCluster Wtyczka LeafletJS Tworzenie plików definicji języka LanguageScript

Question

Używam programu LeafletJS do mapowania planów pięter. Niedawno nauczyłem się trochę o TypeScript w DevIntersection i chciałem zacząć konwertować wszystkie moje JS, aby z niego korzystać. Na szczęście ktoś już utworzył plik definicji dla ulotki, ale jedna z wtyczek, których używam, nie ma jednego (MarkerCluster).

Mam wtyczkę do punktu, w którym się kompiluje (po niewielkich dodatkach do pliku definicji ulotki), ale kiedy próbuję go użyć, nie widzę żadnej z jego metod (patrz przykład użycia poniżej). Próbowałem także utworzyć z niego plik definicji, ale to, co zostało utworzone, było puste (przy użyciu tsc --declaration). Ponieważ plik definicji dla ulotka i wtyczki są trochę długo i wysłał je:

leaflet.d.ts, leaflet.markercluster.ts

Zastosowanie:

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

    } 
} 

Błąd:

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

Wszelkie pomysły i wskazówki dokąd się udać?

Answer 1

Istnieje wiele różnych konwencji tworzenia „klas” w JavaScript, a maszynopis robi” Nie wiem nic o żadnym z nich. To, co masz w pliku leaflet.markercluster.ts, to legalny JavaScript, a więc legalny TypeScript, ale nie jest podzielony na klasy, ponieważ TypeScript je rozumie i dlatego wygenerowany plik deklaracji jest pusty.

Z wyjątkiem rzadkich przypadków pliki deklaracji są tworzone ręcznie i prawdopodobnie to właśnie tutaj będzie trzeba zrobić. Będzie to prawdopodobnie rozpocząć coś takiego:

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

musiałam stworzyć deklarację para plików siebie i po krótkim krzywej uczenia się nie jest zbyt trudne. Zauważyłem, że this blog post jest super pomocny przy rozpoczynaniu pracy (rekwizyty dla Steve'a, jeśli to czytasz), a następnie uczenie się przez przykład na pewno.

Gdy będziesz zadowolony ze swojego pliku deklaracji, pamiętaj, aby wesprzeć cię w przekonaniu o ciepłych, rozmytych uczuciach.

Answer 2

leaflet.marketcluster.ts wydaje się być po prostu kodem JavaScript, nie zawiera deklaracji klasy TypeScript.

Należy utworzyć plik definicji leaflet.marketcluster.d.ts zamiast (i pozostawić oryginalną leaflet.marketcluster kod jak tylko JavaScript):

declare module L { 

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

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

    // . . . etc. . . . 
} 

Answer 3

Wyglądało mi na to, że wkład nie działo, więc po prostu przedstawiła PR do DefinitelyTyped dla leaflet.markercluster aby te ciepłych uczuć :)

posiada większość typowych opcji, ale oczywiście chcielibyśmy jeśli ktoś dodaje więcej (i napisał więcej testów!)

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