MarkerCluster LeafletJS plugin Tạo tệp định nghĩa TypeScript

Question

Tôi đang sử dụng LeafletJS để vạch ra sơ đồ mặt bằng. Gần đây tôi đã học được một chút về TypeScript tại DevIntersection và muốn bắt đầu chuyển đổi tất cả JS của tôi để sử dụng nó. May mắn là ai đó đã tạo ra tệp định nghĩa cho Leaflet, nhưng một trong những plugin tôi sử dụng không có một (MarkerCluster).

Tôi có plugin đến điểm mà nó biên dịch (sau một số bổ sung nhỏ cho tệp định nghĩa tờ rơi) nhưng khi tôi cố gắng sử dụng nó, tôi không thấy bất kỳ phương pháp nào của nó (xem ví dụ sử dụng bên dưới). Tôi cũng đã cố gắng tạo ra một tập tin định nghĩa từ nó nhưng những gì nó tạo ra là sản phẩm nào (sử dụng tsc --declaration). Kể từ khi các tập tin định nghĩa cho Tờ rơi và các plugin là một chút dài Tôi đã tải lên họ:

leaflet.d.ts, leaflet.markercluster.ts

Cách sử dụng:

/// <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ỗi:

The property 'MarkerClusterGroup' does not exist on value of type 'L'

Bất kỳ ý tưởng hoặc hướng dẫn về nơi để đi từ đây?

Answer 1

Có rất nhiều quy ước khác nhau để tạo ra "lớp học" trong JavaScript, và nguyên cảo doesn' t biết bất cứ điều gì về bất kỳ người trong số họ. Những gì bạn có trong leaflet.markercluster.ts là JavaScript hợp pháp và do đó là TypeScript hợp pháp, nhưng nó không được chia thành các lớp khi TypeScript hiểu chúng và đó là lý do tại sao tệp khai báo được tạo cho nó rỗng.

Ngoại trừ trong trường hợp hiếm hoi các tệp kê khai được tạo bằng tay và đó có thể là những gì bạn sẽ phải làm ở đây. Nó có thể sẽ bắt đầu một cái gì đó như thế này:

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

Tôi phải tự mình tạo một vài tờ khai và sau một đường cong học tập ngắn thì không quá khó. Tôi tìm thấy this blog post là siêu hữu ích để bắt đầu (đạo cụ cho Steve nếu bạn đang đọc điều này) và sau đó học bằng ví dụ về definedtyty.

Khi bạn hài lòng với tệp kê khai của mình, hãy nhớ đóng góp trở lại để chắc chắn cho cảm giác mờ ấm áp.

Answer 2

leaflet.marketcluster.ts dường như chỉ là mã JavaScript, nó không chứa bất kỳ khai báo lớp TypeScript nào.

Bạn nên tạo một tập tin định nghĩa leaflet.marketcluster.d.ts thay vì (và rời khỏi gốc leaflet.marketcluster mã như chỉ JavaScript):

declare module L { 

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

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

    // . . . etc. . . . 
} 

Answer 3

Nó trông với tôi như sự đóng góp chưa bao giờ xảy ra, vì vậy tôi chỉ nộp một PR để DefinitelyTyped cho leaflet.markercluster để có được những cảm xúc ấm áp và mờ :)

Có hầu hết các tùy chọn thông thường nhưng rõ ràng là rất thích nếu ai đó đã thêm hơn (và viết các bài kiểm tra nhiều hơn nữa!)

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