MarkerCluster LeafletJS плагин создание файла определения TypeScript

Я использую LeafletJS для отображения планов этажей. Недавно я узнал немного о TypeScript в DevIntersection и хотел начать конвертировать все мои JS, чтобы использовать его. К счастью, кто-то уже создал файл определения для листовки, но один из плагинов, которые я использую, не имеет его (MarkerCluster).

У меня есть плагин до точки, где он компилируется (после некоторых небольших дополнений к файлу определения листовки), но когда я пытаюсь его использовать, я не вижу ни одного из его методов (см. Использование пример ниже). Я также попытался создать файл определения из него, но то, что он создал, было пустым (используя tsc --declaration). Поскольку файл определения для листовки и плагина немного длинный, я загрузил их:

листовка.д.ТС , листовка.маркеркластер.ТС

использование:

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

    }
}

ошибка:

свойство 'MarkerClusterGroup' не существует при значении типа 'L'

какие-либо идеи или руководство о том, куда идти отсюда?

6
leaflet typescript

3 ответов

существует множество различных соглашений для создания "классов" в JavaScript, и TypeScript ничего не знает ни о одном из них. Что у вас в листовке.маркеркластер.ts является законным JavaScript и, следовательно, законным TypeScript, но он не разбит на классы, поскольку TypeScript понимает их, и поэтому файл объявления, созданный для него, пуст.

за исключением редких случаев файлы объявлений создаются вручную, и это, вероятно, то, что вам придется сделать здесь. Это, вероятно, начнется что-то вроде этого:

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

мне пришлось создать пару файлов объявлений самостоятельно, и после короткой кривой обучения это не слишком сложно. Я нашел этот блог быть очень полезным для начала работы (реквизит для Стива, если Вы читаете это), а затем учиться на примере definitelytyped.

Как только вы будете довольны своим файлом декларации, не забудьте внести свой вклад в definitelytyped для теплых нечетких чувств.

5

Мне показалось, что вклада никогда не было, поэтому я просто представил PR DefinitelyTyped для листовки.markercluster, чтобы получить эти теплые и нечеткие чувства :)

имеет большинство общих вариантов, но, очевидно, хотел бы, если кто-то добавил больше (и написал больше тестов!)

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

4

leaflet.marketcluster.ts похоже, что это просто код JavaScript, он не содержит объявления класса TypeScript.

вы должны создать файл определения leaflet.marketcluster.d.ts вместо этого (и оставьте оригинал leaflet.marketcluster код как просто JavaScript-код):

declare module L {

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

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

    // . . . etc. . . . 
}
2