2013-04-18 8 views
6

私はLeafletJSを使用してフロアプランをマップしています。私は最近、DevIntersectionでTypeScriptについて少し学び、それを使用するすべてのJSの変換を開始したいと考えました。幸いなことに誰かが既にリーフレットの定義ファイルを作成していますが、私が使っているプラ​​グインの1つにMarkerClusterがありません。MarkerCluster LeafletJSプラグインタイプスクリプト定義ファイルの作成

コンパイルするポイントまでのプラグインがあります(小冊子の定義ファイルに少し追加した後)がありますが、使用しようとすると、そのメソッドは表示されません(下記の使用例を参照)。私もそれから定義ファイルを作成しようとしましたが、作成された内容は空でした(tsc --declarationを使用)。リーフレットやプラグインの定義ファイルは、少し長い私はそれらをアップロードしているので:

leaflet.d.tsleaflet.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'

任意のアイデアや指導をどこから行くの?

+0

マイナー迷惑が、それはあなたがあなたのファイルをホストするために要旨を作成した場合(あなたを助けたいという私たちのそれらのためのより容易な)方が良いだろう場合は、HTTP ://gist.github.com)。 –

+0

@AlexDreskoはそれについて知らなかった - 私は次回それを使用することを確かめるでしょう。ありがとう! – Doug

答えて

5

あり異なる慣習の多くはJavaScriptで「クラス」を作成するためのものであり、活字体は」doesnのそれらのいずれかについて何も知りません。あなたが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が(あなたがこれを読んでいるならばスティーブに小道具を始めるための)スーパーに役立ち、次にdefinitelytypedの例で学ぶことが分かった。

あなたが宣言ファイルに満足したら、暖かいファジー感情のために間違いなく型に戻してください。

+0

詳細をありがとう、ブログエントリは非常に役立つように見えます。これを良い状態にしたら、私はそれを明確に型に変換することに貢献します – Doug

+1

+1 'warm fuzzy feelings' – MiMo

2

leaflet.marketcluster.tsはJavaScriptコードのように見えますが、TypeScriptクラス宣言は含まれていません。

あなたは、定義ファイルの代わりにleaflet.marketcluster.d.tsを作成(および元leaflet.marketclusterコードとしてだけではJavaScriptを残して)必要があります。

declare module L { 

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

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

    // . . . etc. . . . 
} 
+0

素晴らしいです、ありがとう!これは私が何をする必要があるかを明確にするのに役立ちます – Doug

4

貢献は決して起こらなかったので、私はちょうどそれらの暖かいとファジー感を得るためにleaflet.markerclusterためDefinitelyTypedにPRを提出したようですが、私には見えた:)

は、一般的なオプションのほとんどを持っていますが、明らかに大好きです誰かが(もっと追加(および!より多くのテストを書いた)

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

+0

私はリーフレットパス変換のために書こうとしている同様の型宣言にコメントできますか?前もって感謝します! http://stackoverflow.com/questions/42303181 – carpiediem

関連する問題