TypeScript types file

[gavinr-maps]

Problem

As a follow-up from #259 and https://github.com/Esri/esri-leaflet-geocoder/issues/318#issuecomment-2312706576, it seems like the TypeScript types at https://www.npmjs.com/package/@types/esri-leaflet are ok but not working in certain situations.

Solution

We should publish our own typescript types file within this repo, like we did within https://github.com/Esri/esri-leaflet-vector/pull/114

Replication Steps

1. Run the following in a terminal:

npm create vite@latest test-esri-leaflet-geocoder -- --template vanilla-ts
cd test-esri-leaflet-geocoder
npm install

npm install leaflet
npm i --save-dev @types/leaflet

npm install esri-leaflet-vector
npm install esri-leaflet-geocoder

npm run dev

2. add the following to the top of src/style.css:

@import url(https://unpkg.com/leaflet@1.9/dist/leaflet.css);
@import url(https://unpkg.com/esri-leaflet-geocoder/dist/esri-leaflet-geocoder.css);

#app {
  width: 800px;
  height: 400px;
}

REPLACE the file src/main.ts with this:

import "./style.css";

import * as L from "leaflet";
// import * as esriLeaflet from "esri-leaflet";
import * as esriLeafletVector from "esri-leaflet-vector";
import * as esriLeafletGeocoder from "esri-leaflet-geocoder";

const createMap = (domNode: HTMLDivElement) => {
  const apikey =
    "YOUR_API_KEY";
  var map = L.map(domNode).setView([45.5165, -122.6764], 12);
  // esriLeaflet.basemapLayer("Streets").addTo(map);
  esriLeafletVector
    .vectorBasemapLayer("ArcGIS:Streets", {
      apikey,
    })
    .addTo(map);

  // create the geocoding control and add it to the map
  var searchControl = esriLeafletGeocoder
    .geosearch({
      providers: [
        esriLeafletGeocoder.arcgisOnlineProvider({
          // API Key to be passed to the ArcGIS Online Geocoding Service
          apikey,
        }),
      ],
    })
    .addTo(map);

  // create an empty layer group to store the results and add it to the map
  var results = L.layerGroup().addTo(map);

  // listen for the results event and add every result to the map
  searchControl.on("results", function (data: any) {
    results.clearLayers();
    for (var i = data.results.length - 1; i >= 0; i--) {
      results.addLayer(L.marker(data.results[i].latlng));
    }
  });
};
createMap(document.querySelector<HTMLDivElement>("#app")!);

3. Open the project in VS Code.

• Expected: No Typescript errors.
• Actual: Could not find a declaration file for module 'esri-leaflet-geocoder'. 'c:/../node_modules/esri-leaflet-geocoder/dist/esri-leaflet-geocoder-debug.js' implicitly has an 'any' type. Try npm i --save-dev @types/esri-leaflet-geocoder if it exists or add a new declaration (.d.ts) file containing declare module 'esri-leaflet-geocoder';ts(7016)

[nooras]

Hey @gavinr I am interested in this task. Can you please assign me ? Also which specific type need to be added ?

[hhkaos]

Sorry @nooras I just found out that @gavinr was out of the office last week. Let me ping @patrickarlt & @cyatteau

[gavinr-maps]

I am interested in this task. Can you please assign me ?

It is not necessary for you to be assigned in order for you to work on this task - please feel to go ahead and work on it! Just fork the repo, create a branch, make the changes in that branch, and then send a PR back to this repo.

Also which specific type need to be added ?

I think it would be types for any of the pubic APIs, i.e. what is listed here: https://github.com/Esri/esri-leaflet-geocoder?tab=readme-ov-file#api-reference

[kimmykokonut]

Is @nooras assigned to this? I don't want to pick up an issue if someone is already on it.

[nooras]

Is @nooras assigned to this? I don't want to pick up an issue if someone is already on it.

Hey @kimmykokonut I am working on it. Thanks

[nooras]

hey @gavinr-maps, @hhkaos I am done with changes in local. how can i verify these changes are working fine in local ?

[nooras]

@gavinr-maps Please review the PR. Let me know if any changes required

[hhkaos]

I'm trying to test, but I'm not as familiar as I should be with TypeScript these days.... So I'm going to defer to @gavinr-maps 😅

[gavinr-maps]

@hhkaos I have added replication steps to the original issue above.

[hhkaos]

I have followed the steps. Is the error in the IDE or the terminal?

At first, as I expected, the IDE still shows a couple of errors (because @nooras changes shouldn't be present, right?):

To test her changes, locally, I have:

1. Cloned her repo and switched to feat-typescript-types branch
2. Run npm install and npm run build successfully
3. Copied the files in the dist folder and replaced the files in test-esri-leaflet-geocoder/node_modules/esri-leaflet-geocoder/dist folder
4. Close the VSCode tab and open it again (but the errors are still there)

Is that the right way to test it? 😅

The app is building and the terminal is not showing any errors:

So... I'm confused because you mention:

Actual: Could not find a declaration file for module 'esri-leaflet-geocoder'. 'c:/../node_modules/esri-leaflet-geocoder/dist/esri-leaflet-geocoder-debug.js' implicitly has an 'any' type. Try npm i --save-dev @types/esri-leaflet-geocoder if it exists or add a new declaration (.d.ts) file containing declare module 'esri-leaflet-geocoder';ts(7016)

But I don't see that error anywhere. Does it mean it is fixed? 😅

[hhkaos]

@nooras, just FYI, I just checked with @gavinr-maps on a call, and the issue on my side was that I had @types/esri-leaflet-geocoder installed globally; that's why I didn't have that issue 😅. So you can proceed with his instructions

Thanks!