Как исправить 'TS2769 Нет перегрузки соответствует этому вызову' при использовании ответной листовки

Question

Я пытаюсь реализовать компонент карты Leaflet в своем приложении реакции. Вот как выглядит мой компонент:

import React from "react";
import { Map, Marker, Popup, TileLayer } from "react-leaflet";
import "./styles.scss";

const position = [51.505, -0.09];

const LocationMap: React.FC = () => {
  return (
    <section className="find-container container">
      <h2 className="find-title title">Find us</h2>
      <Map center={position} zoom={12}>
        <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
        />
      </Map>
    </section>
  );
};

export default LocationMap;

Когда я запускаю "npm start", проект не компилируется и выдает следующую ошибку:

No overload matches this call.
  Overload 1 of 2, '(props: Readonly<MapProps>): Map<MapProps, Map>', gave the following error.
    Type 'number[]' is not assignable to type 'LatLng | LatLngLiteral | LatLngTuple | undefined'.
      Type 'number[]' is missing the following properties from type '[number, number]': 0, 1
  Overload 2 of 2, '(props: MapProps, context?: any): Map<MapProps, Map>', gave the following error.
    Type 'number[]' is not assignable to type 'LatLng | LatLngLiteral | LatLngTuple | undefined'.
      Type 'number[]' is not assignable to type 'LatLngTuple'.  TS2769

Кто-то знает, как это исправить?

Answer 1

TypeScript жалуется, поскольку center свойство объявляется как массив (number[]), в то время как ожидается, что оно имеет тип кортежа:

const position:[number,number] = [51.505, -0.09];

или LatLngLiteral тип:

const position: LatLngLiteral = { lat: 51.505, lng: -0.09 };

или LatLng введите:

const position = new LatLng(51.505,-0.09);

Подводя итог, для использования react-leaflet с TypeScript необходимо установить следующие пакеты:

• leaflet as зависимость
• react-leaflet и определения типов @types/react-leaflet

И последнее, но не менее важное: согласно документации листовка CSS файл должен быть включен например, через index.html:

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
   integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
   crossorigin=""/>