Reactjs 如何修复'；TS2769没有重载与此调用匹配'；使用react传单时

我正在尝试在react应用程序上实现传单地图组件。这就是我的组件的外观：

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;

从“React”导入React；
从“反应传单”导入{Map，Marker，Popup，tillelayer}；
导入“/styles.scss”；
常数位置=[51.505，-0.09]；
const LocationMap:React.FC=（）=>{
返回(
找到我们
);
};
导出默认位置图；

当我运行“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

没有与此调用匹配的重载。
重载1/2'（props:Readonly）：Map'，出现以下错误。
类型“number[]”不能分配给类型“LatLng | LatLngLiteral | LatLngTuple | undefined”。
类型“number[]”缺少类型“[number，number]”中的以下属性：0，1
重载2/2'（props:MapProps，context？：any）：Map'，出现以下错误。
类型“number[]”不能分配给类型“LatLng | LatLngLiteral | LatLngTuple | undefined”。
类型“number[]”不可分配给类型“LatLngTuple”。TS2769

---

有人知道如何修复它吗？

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传单

与TypeScript一起使用，需要安装以下软件包：

• 单张

  作为依赖项

• react传单

  和类型定义

  @types/react传单

最后但并非最不重要的是，传单CSS文件需要包括在内，例如，通过

index.html

：

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

---

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传单

与TypeScript一起使用，需要安装以下软件包：

• 单张

  作为依赖项

• react传单

  和类型定义

  @types/react传单

最后但并非最不重要的是，传单CSS文件需要包括在内，例如，通过

index.html

：

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