CODEWITHSUNDEEP
typescriptleaflettypescript-typings
mindparse
mindparse

Reputation: 7235

Extending existing @types type definition to include missing properties

I am using the latest leaflet @types in my project (v1.2.5), but these are not in-line with that latest version of leaflet (1.3.x)

In particular, their LayerGroup interface does not include a setZIndex property and so I would like to extend the interface further to include this so I can call the function in my TS source.

Their type definition for a LayerGroup currently looks like this:

declare namespace L {

    /**
      * Create a layer group, optionally given an initial set of layers.
      */
    function layerGroup<T extends ILayer>(layers?: T[]): LayerGroup<T>;


    export interface LayerGroupStatic extends ClassStatic {
        /**
          * Create a layer group, optionally given an initial set of layers.
          */
        new<T extends ILayer>(layers?: T[]): LayerGroup<T>;
    }
    export var LayerGroup: LayerGroupStatic;

    export interface LayerGroup<T extends ILayer> extends ILayer {
        /**
          * Adds the group of layers to the map.
          */
        addTo(map: Map): LayerGroup<T>;

        /**
          * Adds a given layer to the group.
          */
        addLayer(layer: T): LayerGroup<T>;

        /**
          * Removes a given layer from the group.
          */
        removeLayer(layer: T): LayerGroup<T>;

        /**
          * Removes a given layer of the given id from the group.
          */
        removeLayer(id: string): LayerGroup<T>;

        /**
          * Returns true if the given layer is currently added to the group.
          */
        hasLayer(layer: T): boolean;

        /**
          * Returns the layer with the given id.
          */
        getLayer(id: string): T;

        /**
          * Returns an array of all the layers added to the group.
          */
        getLayers(): T[];

        /**
          * Removes all the layers from the group.
          */
        clearLayers(): LayerGroup<T>;

        /**
          * Iterates over the layers of the group, optionally specifying context of
          * the iterator function.
          */
        eachLayer(fn: (layer: T) => void, context?: any): LayerGroup<T>;

        /**
          * Returns a GeoJSON representation of the layer group (GeoJSON FeatureCollection).
          * Note: Descendent classes MultiPolygon & MultiPolyLine return `Feature`s, not `FeatureCollection`s
          */
        toGeoJSON(): GeoJSON.FeatureCollection<GeoJSON.GeometryObject>|GeoJSON.Feature<GeoJSON.MultiLineString|GeoJSON.MultiPolygon>;

        ////////////
        ////////////
        /**
          * Should contain code that creates DOM elements for the overlay, adds them
          * to map panes where they should belong and puts listeners on relevant map events.
          * Called on map.addLayer(layer).
          */
        onAdd(map: Map): void;

        /**
          * Should contain all clean up code that removes the overlay's elements from
          * the DOM and removes listeners previously added in onAdd. Called on map.removeLayer(layer).
          */
        onRemove(map: Map): void;
    }
}

Would it be possible for me to add another type definition in my project to provide the missing property?

I know I can raise a pull request to add this on the @types repo, but in the meantime, to unblock me from development I was hoping I could use something temporary

Upvotes: 3

Views: 1827

Answers (1)

Titian Cernicova-Dragomir
Titian Cernicova-Dragomir

Reputation: 249756

You can declare an augmentation for the module:

// leaflet.aug.d.ts
import 'leaflet';
declare module 'leaflet' {
    export interface LayerGroup<P = any> {
        otherProps: number;
        setZIndex (id: number) : Layer[];
    }
}

// Other file
/// <reference path="./leaflet.aug.d.ts" />    
import 'leaflet';
var d: L.LayerGroup;
d.otherProps = 10;
d.setZIndex(10);

Note I installed the leaflet type definitions (npm install @types/leaflet) and they actually do contain this method and the definition taht you posted does not look like what is currently in the definition. Make sure you have the latest definition

Upvotes: 4

Related Questions