如何修复：类型“typeof import("node_modules/@types/esri-leaflet-geocoder/index")”上不存在属性“geocodeService”

Question

我在使用 Esri Leaflet Geocoder 类型包时遇到打字问题。 https://www.npmjs.com/package/@types/esri-leaflet-geocoder

这是我导入它的方法：

import * as L from 'leaflet';
import 'esri-leaflet';
import * as ELG from 'esri-leaflet-geocoder';

这是我尝试使用它的方法：

 const geocodeServiceResult = ELG.geocodeService({ apikey: apiToken });

      geocodeServiceResult
        .suggest()
        .text(value)
        .within([
          [boundaryBox.ymin, boundaryBox.xmin],
          [boundaryBox.ymax, boundaryBox.xmax],
        ])
        .run((err, response) => {
          if (err) {
            console.error(err);
            return;
          }
          console.log("Response suggestions are:", response)
          if(response.suggestions && response.suggestions.length > 0)
          {
            setSuggestions(
              response.suggestions.map((suggestion: AddressSuggestion) => ({
                text: suggestion.text
              }))
            );
          }
        });
    } else {
      setSuggestions([]);
    }

我收到以下 TypeScript 错误 类型“typeof import("MyPath/node_modules/@types/esri-leaflet-geocoder/index")”上不存在属性“geocodeService”

我的 tsconfig 如下：

{
  "compilerOptions": {
    "target": "es2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "noUncheckedIndexedAccess": true
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "**/*.cjs",
    "**/*.mjs",
    "**/*.js"
  ],
  "exclude": ["node_modules"]
}

我已经尝试过以下导入：

import * as L from 'leaflet';
import 'esri-leaflet';
import 'esri-leaflet-geocoder';

import * as ELG from 'esri-leaflet-geocoder';

import * as L from 'leaflet';
import 'esri-leaflet';
import 'esri-leaflet-geocoder';

...

L.esri.Geocoding.geocodeService (this throws a null exception trying to reference Geocoding)

Answer 1

我没有使用过这个库，但这里有一些可能有用的信息：

1. 看起来这个包有 TS 问题 - https://github.com/perliedman/leaflet-control-geocoder/issues/260。一些例子在线程中。
2. 尝试像

   import L from 'leaflet';

   那样导入。然后使用L.esri.Geocoding.geocodeService。有一些参考：https://medium.com/@limeira.felipe94/integrating-geocoder-with-react-leaflet-in-webgis-dee21220332e
3. 我们总是有“肮脏”的解决方案。试试

   (ELG as any).geocodeService