MarkerCluster LeafletJS 插件 TypeScript 定义文件创建

Question

我正在使用 LeafletJS 绘制平面图。我最近在 DevIntersection 学习了一点关于 TypeScript 的知识，并想开始转换我所有的 JS 以使用它。幸运的是，有人已经为 Leaflet 创建了定义文件，但我使用的插件之一没有（MarkerCluster）。

我的插件可以编译（在传单定义文件中添加了一些小的内容之后），但是当我尝试使用它时，我看不到它的任何方法（参见下面的用法示例）。我也尝试从中创建一个定义文件，但它创建的是空的（使用 tsc --declaration）。由于 Leaflet 和插件的定义文件有点长，我上传了它们：

leaflet.d.ts , leaflet.markercluster.ts

用法：

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

    }
}

错误：

“L”类型的值上不存在“MarkerClusterGroup”属性

关于从这里去哪里的任何想法或指导？

Answer 1

在 JavaScript 中创建“类”有很多不同的约定，而 TypeScript 对它们一无所知。您在 leaflet.markercluster.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
    }
}

我必须自己创建几个声明文件，经过短暂的学习曲线后，这并不太难。我发现this blog post 对入门非常有帮助（如果您正在阅读本文，请向史蒂夫提供支持）然后通过示例学习绝对类型。

一旦您对您的声明文件感到满意，请记住回馈给肯定输入以获得温暖的模糊感觉。

Answer 2

leaflet.marketcluster.ts 似乎只是 JavaScript 代码，它不包含任何 TypeScript 类声明。

您应该创建一个定义文件 leaflet.marketcluster.d.ts 代替（并将原始 leaflet.marketcluster 代码保留为 JavaScript）：

declare module L {

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

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

    //etc ...
}

Answer 3

我有同样的问题，安装这些解决了：

$ npm i leaflet.markercluster
$ npm i --save @types/leaflet.markercluster

Answer 4

在我看来，贡献从来没有发生过，所以我只是提交了一个 PR 到 DefinitelyTyped 获取leaflet.markercluster 以获得那些温暖和模糊的感觉:)

拥有大多数常用选项，但如果有人添加更多（并编写更多测试！）显然会喜欢！

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