Как создать элемент Geo JSON Feature с помощью Typescript + Reaction-leaflet

Question

Я пытаюсь создать реагирующий элемент из Feature в Typescript, но безуспешно. (Я использую реагирующую листовку + 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, геометрия не существует, есть просто поле типа, так как я должен передать геометрию элементу Geo JSON, который я пытаюсь создать? (определение типа GeoJsonObject: http://definitelytyped.org/docs/geojson--geojson/interfaces/geojson.geojsonobject.html)

И если я попробую этот код в «обычном» javascript, он сработает, знаете ли вы почему?

Спасибо за вашу помощь!

Answer 1

Здесь происходит несколько вещей.

Во-первых, согласно определениям типа @types/geojson, для точечного объекта должно быть установлено поле type со строковым литералом элемента «Feature» (и объект геометрии определен как поле type со строковым литералом типа «Точка»).

Во-вторых, компилятор TypeScript не может сделать вывод, что Поля «type» имеют правильный строковый литерал (он выводит их вместо более общего типа «string»). Хорошее объяснение такого рода вещей можно найти в этом ответе на вопрос «Typescript - Почему нельзя сделать вывод о строковом литеральном типе?».

Теперь, когда мы понимаем проблема, мы можем это исправить. Вот ваш пример, измененный таким образом, чтобы он работал:

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

Единственное отличие состоит в добавлении двух утверждений типа as "Feature" и as "Point", которые сообщают компилятору TypeScript эти Поля "type:" имеют строковые литералы типов "Feature" и "Point" соответственно.

Чтобы уменьшить дублирование, вы также можете использовать as const вместо as "Feature" et c.

Answer 2

Скорее всего, вы просто пропускаете элемент properties (возможно, пустой объект) вашего Geo JSON Объект (ы) объектов: http://definitelytyped.org/docs/geojson--geojson/interfaces/geojson.feature.html

{
  type: "Feature",
  geometry: {
    type: "Point",
    coordinates: [125.6, 10.1]
  },
  properties: {} // Not optional for a Feature
}

Answer 3

Я думаю, что ошибка в коде и вводе компонента Geo JSON. Похоже, что этот компонент ожидает GeoJsonObject и не принимает Feature. Вы можете попробовать изменить тип свойства data на Feature<Point> и проверить, исчезла ли эта ошибка.