Understand how to type with Typescript

[andresgutgon]

What?

Hi 👋 first of all. Thanks a lot for this code!

I'm implementing a React wrapper over this lib and I'm using Typescript. I have this working

import "leaflet-control-geocoder/dist/Control.Geocoder.css";
import "leaflet-control-geocoder/dist/Control.Geocoder.js"

import { useEffect } from 'react'
import { Control, Util } from 'leaflet'
import Geocoder from 'leaflet-control-geocoder'

const SearchBar = () => {
  const map = useMap();
  useEffect(() => {
    // Typing is hard `leaflet-control-geocoder` do
    // this internally: `Leaflet.Util.extend(Leaflet.Control, { Geocoder: Geocoder })
    // And TypeScript doesn't understand what's `Geocoder` property
    const geocoder = (Control as any).Geocoder.nominatim()

Is explained in the commend. That any is a bit of a hack. Any idea how could this be done better?

I think it would be super nice if we could expose each geocoder. No only their types are exposed in dist folder. I think something like this could work

import Geocoder, { geocoders } from 'leaflet-control-geocoder'

This way we wouldn't need to use the Leaflet.Util.extend extended control

Thanks!

[simon04]

Published as version 2.4.0 – https://github.com/perliedman/leaflet-control-geocoder/releases/tag/2.4.0

[andresgutgon]

Niiiiice