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

在我看来，这个贡献从来没有发生过，所以我只是向DefinitelyTyped提交了一份PR，以获取leaflet.markercluster以获得那些温暖而模糊的感受：）

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

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

Answer 3

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 4

我遇到了同样的问题，并解决了以下问题：

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

MarkerCluster LeafletJS插件TypeScript定义文件创建

4 个答案: