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

    }
}

错误:

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

从这里开始的任何想法或指导？

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

我必须自己创建一些声明文件,经过一段简短的学习曲线后,它并不太难.我发现这篇博文对于入门非常有帮助(如果你正在读这篇文章的话,那就是史蒂夫的道具),然后通过关于肯定类型的例子来学习.

一旦你对你的申报文件感到满意,记得要回馈肯定的温暖模糊感受.

Answer 2

在我看来，这种贡献从未发生过，所以我只是向Leaflet.markercluster 的DefinelyTyped提交了一份 PR ，以获得那些温暖而模糊的感觉:)

具有大多数常见选项，但如果有人添加更多选项（并编写更多测试！），显然会很高兴

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

要使用这些运行：

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

并添加以下导入：

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