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

    }
}

错误:

The property 'MarkerClusterGroup' does not exist on value of type '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
    }
}

我必须自己创建几个声明文件，经过短暂的学习曲线后，这并不难。我找到了 this blog post对入门非常有帮助(如果你正在阅读这篇文章，史蒂夫的 Prop )然后通过示例学习 definitelytyped。

一旦您对声明文件感到满意，请记得回馈 definitelytyped 以获得温暖的模糊感觉。