7

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

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

传单.d.ts，传单.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”属性

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

4

4 回答 4

6

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

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

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

于 2013-04-18T15:26:50.007 回答
4

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

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

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

于 2016-01-19T17:51:09.703 回答
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 ...
}
于 2013-04-18T15:21:48.627 回答
1

我有同样的问题并通过安装这些得到解决：

$ npm i leaflet.markercluster
$ npm i --save @types/leaflet.markercluster
于 2019-11-07T04:36:38.643 回答