带打字稿的react-leaflet GeoJSON

Question

我对带有Reactjs的打字稿非常陌生。目前，我正在从事的项目正在使用react-leaflet / leaflet，特别是其GeoJSON组件。将数据传递给道具时，我遇到打字错误。

我一直在对此进行一些研究，甚至安装了geojson程序包，并按照他们的示例 https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/geojson/geojson-tests.ts 尝试了我所知道的一切，但是没有运气。

如果我尝试通过

传递数据

const GeoJsonData: geojson.Feature<geojson.Polygon, geojson.GeoJsonProperties> = {
  geometry: {
    coordinates: [[
      [20.7325804014456, -156.424372312952],
      [20.7320799340775, -156.424348923897],
      [20.732046895414, -156.425191022255],
      [20.7321183621394, -156.425194200455],
      [20.7321078658074, -156.425458542909],
      [20.7325370751528, -156.425476608985],
      [20.7325804014456, -156.424372312952]
    ]],
    type: 'Polygon',
  },
  properties: {
    name: 'some name'
  },
  type: 'Feature',
};

或

const GeoJsonData: = {
  geometry: {
    coordinates: [[
      [20.7325804014456, -156.424372312952],
      [20.7320799340775, -156.424348923897],
      [20.732046895414, -156.425191022255],
      [20.7321183621394, -156.425194200455],
      [20.7321078658074, -156.425458542909],
      [20.7325370751528, -156.425476608985],
      [20.7325804014456, -156.424372312952]
    ]],
    type: 'Polygon',
  },
  properties: {
    name: 'some name'
  },
  type: 'Feature',
} as as geojson.GeoJsonObject;

我收到此错误

Conversion of type '{ properties: { name: string; } | { name: string; }; type: "Feature"; geometry: Polygon | null; id?: string | number | undefined; bbox?: BBox2d | BBox3d | undefined; }[]' to type 'GeoJsonObject' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.ts(2352) Conversion of type '{ properties: { name: string; } | { name: string; }; type: "Feature"; geometry: Polygon | null; id?: string | number | undefined; bbox?: BBox2d | BBox3d | undefined; }[]' to type 'GeoJsonObject' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first. Property 'type' is missing in type '{ properties: { name: string; } | { name: string; }; type: "Feature"; geometry: Polygon | null; id?: string | number | undefined; bbox?: BBox2d | BBox3d | undefined; }[]' but required in type 'GeoJsonObject'.

但是如果我从数据中删除类型。然后我得到这个错误。

const GeoJsonData: = {
    geometry: {
      coordinates: [[
        [20.7325804014456, -156.424372312952],
        [20.7320799340775, -156.424348923897],
        [20.732046895414, -156.425191022255],
        [20.7321183621394, -156.425194200455],
        [20.7321078658074, -156.425458542909],
        [20.7325370751528, -156.425476608985],
        [20.7325804014456, -156.424372312952]
      ]],
      type: 'Polygon',
    },
    properties: {
      name: 'some name'
    },
    type: 'Feature',
  }

No overload matches this call. Overload 1 of 2, '(props: Readonly<GeoJSONProps>): GeoJSON<GeoJSONProps, GeoJSON<any>>', gave the following error. Property 'type' is missing in type '{ properties: { name: string; } | { name: string; }; type: "Feature"; geometry: Polygon | null; id?: string | number | undefined; bbox?: BBox2d | BBox3d | undefined; }[]' but required in type 'GeoJsonObject'. Overload 2 of 2, '(props: GeoJSONProps, context?: any): GeoJSON<GeoJSONProps, GeoJSON<any>>', gave the following error. Type '{ properties: { name: string; } | { name: string; }; type: "Feature"; geometry: Polygon | null; id?: string | number | undefined; bbox?: BBox2d | BBox3d | undefined; }[]' is not assignable to type 'GeoJsonObject'.

 <Map
        center={[props.centerMapCoordinates.lat, props.centerMapCoordinates.lng]}
        zoom={props.centerMapCoordinates.zoom}
        style={{ height: mapHeight }}
        onMoveEnd={(event: any) => props.getZoomMap(event)}
      >
        <TileLayer url="https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}/"
        />

        <GeoJSON
          key={GeoJsonData}
          data={GeoJsonData}
          // data={GeoJsonData}
          onEachFeature={(feature, layer) => {
            layer.on('click', (e) => {
              console.log(e.target.feature);
              // new Field().doesIntersect(e.target.feature);
            });
            if (props.centerMapCoordinates.zoom > 16) {
              layer.bindTooltip(feature.properties.name, {
                direction: 'center',
                permanent: true,
              }).openTooltip();
            } else {
              layer.closeTooltip();
            }
            layer.bindPopup(feature.properties.name);
          }}
        />
      </Map>

注意：如果我将any添加到GeoJsonData中，它将消除错误，但是使用打字稿没有任何意义。

是否有人熟悉此问题或知道如何定义geojson类型？

如有任何疑问，请告诉我。如果需要，我可以提供更多详细信息。先感谢您。