alex3165 / react-leaflet-draw

React component for leaflet-draw on top of react-leaflet
228 stars 152 forks source link

Export types for Typescript implementations #177

Open charlieforward9 opened 1 year ago

charlieforward9 commented 1 year ago

I would like to have the ability to declare the DrawEvents type in my TS function, for safe scaling and intellisense.


import { DrawEvents } from "react-leaflet-draw";

const onEvent = (event: DrawEvents) => {
  ...
}

Throws: Module '"react-leaflet-draw"' declares 'DrawEvents' locally, but it is not exported.

I assume as I continue to develop, I will need access to more types, so it would be nice to have them all available, just in case.

sheldonmaschmeyer commented 1 year ago

I agree. As a workaround, for now, below is an example of using leaflet for the type definition.

import type L from 'leaflet';
const onCreate = (e: L.DrawEvents.Created): void => {
setDrafts([
    ...drafts,
    {
      id: e.layer._leaflet_id,
      layer: JSON.stringify(e.layer.toGeoJSON()),
    },
  ]);
}

in a *.d.ts file

import type L from 'leaflet';

declare module 'leaflet' {
  ...
  export interface Layer {
    _layers: L.Layers;
    _leaflet_id: number;
  }
}
SheldonWBM commented 1 year ago

Update to workaround (after updating packages):

declare module 'leaflet' {
...
  export interface DrawEvents {
    Created: {
      layer: LayerGroup;
    };
    Edited: {
      layers: L.Layers;
    };
  }
  export interface Layer {
    _layers: L.Layers;
    _leaflet_id: number;
  }
}

then instead of const onCreate = (e: L.DrawEvents.Created): void => { it is const onCreate = (e: L.DrawEvents['Created']): void => {

I agree with @charlieforward9 , there must be a better solution.

TheNumenorean commented 1 year ago

Bump, this would be really nice.