如何使用 Typescript + React-leaflet 创建 GeoJSON 要素元素

Question

我正在尝试从 Typescript 中的功能创建 <GeoJSON {...} /> 反应元素，但没有成功。（我正在使用react-leaflet + Typescript）使用常规js，我只需要做类似的事情：

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

但在 Typescript 中，如果我尝试执行完全相同的操作，则会遇到以下错误：

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 类型定义时，几何图形不存在，只有“类型”字段，那么我应该如何将几何图形传递给我尝试创建的 GeoJSON 元素？（GeoJsonObject的类型定义：http://definitelytyped.org/docs/geojson--geojson/interfaces/geojson.geojsonobject.html）

如果我在“常规”javascript 中尝试这段代码，它确实有效，你知道为什么吗？

Answer 1

我认为错误出在 GeoJSON 组件的代码和类型上。看起来该组件需要 aGeoJsonObject并且不接受Feature. 您可以尝试将属性的类型更改data为Feature<Point>并检查该错误是否消失。