如何使用Typescript + react-leaflet创建geojson元素（并将其用于地图中）

Question

我正在尝试从Typescript中的Feature创建一个react元素，但没有成功。 （我正在使用react-leaflet + Typescript）使用普通的js，我只需要做类似的事情：

<Map
    {...}
    <GeoJSON 
        data={...} <- Here I put my feature in JSON format
        style={...} <- Associated style
     />
/>

但是在打字稿中，如果我尝试做完全相同的事情，则会遇到以下错误：

No overload matches this call.
  Overload 1 of 2, '(props: Readonly<GeoJSONProps>): GeoJSON<GeoJSONProps, GeoJSON<any>>', gave the following error.
    Type '{ type: string; geometry: { type: string; coordinates: number[]; }; }' is not assignable to type 'GeoJsonObject'.
      Object literal may only specify known properties, and 'geometry' does not exist in type 'GeoJsonObject'.
  Overload 2 of 2, '(props: GeoJSONProps, context?: any): GeoJSON<GeoJSONProps, GeoJSON<any>>', gave the following error.
    Type '{ type: string; geometry: { type: string; coordinates: number[]; }; }' is not assignable to type 'GeoJsonObject'.
      Object literal may only specify known properties, and 'geometry' does not exist in type 'GeoJsonObject'.ts(2769)

这里是我尝试过的许多事情的样本：

<Map
    {...}
    <GeoJSON
        data={{
            type: "Feature",
            geometry: {
                type: "Point",
                coordinates: [125.6, 10.1]
            }
        }}
    />
/>

[当我检查GeoJsonObject类型定义时，不存在几何图形，只有“ type”字段，所以我应该如何将几何图形传递给我要创建的GeoJSON元素？ （GeoJsonObject的类型定义：http://definitelytyped.org/docs/geojson--geojson/interfaces/geojson.geojsonobject.html）

如果我在“常规” javascript中尝试此代码，它确实可以工作，你知道为什么吗？

感谢您的帮助！

Answer 1

我认为错误在于GeoJSON组件的代码和类型。看起来该组件期望GeoJsonObject，但不接受Feature。您可以尝试将data属性的类型更改为Feature<Point>，然后检查该错误是否消失。