React-Leaflet 显示 TS2769：没有重载匹配此调用。类型错误

Question

我已经使用 react-leaflet 制作了一个映射组件，它工作得非常好，但是如果我在下面的示例中添加 @ts-ignore 行，我只能构建它。如果我不这样做，我会收到一条错误消息：

TS2769: No overload matches this call.

如果我输出 postition 的值，我得到 [13.298034302, 43.0488191271] 并且 imageBounds 给我 [{lat: 14.194809302, lng: 42.3558566271}, {lat: 12.401259302, lng: 43.7417816271}] （我也尝试过将其作为值数组，但没有具有相同结果的对象。

我看不出哪里出错了，如果可以的话，我宁愿不发布带有@ts-ignore 的代码。

代码如下：


import React from 'react'
import { Map, Marker, Popup, TileLayer } from 'react-leaflet'

/* Import Types */
import PropTypes from './types/props'

/* Import Stylesheet */
import './leaflet.css'
import styles from './styles.module.scss'

const defaultProps: PropTypes = {
  bounds: {
    imageTop: 0,
    imageLeft: 0,
    imageRight: 0,
    imageBottom: 0
  },
  tileLayer: {
    url: '',
    attribution: ''
  },
  minZoom: 8,
  maxZoom: 12,
  touchZoom: true,
  zoom: 10,
  zoomDelta: 0.25,
  zoomSnap: 0.25,
  zoomControl: true,
  attributionControl: false,
  zoomAnimation: false
}

/* Render component */
export const Mapping: React.FunctionComponent<PropTypes> = ({
  bounds,
  tileLayer,
  minZoom,
  maxZoom,
  touchZoom,
  zoom,
  zoomDelta,
  zoomSnap,
  zoomControl,
  attributionControl,
  zoomAnimation
}: PropTypes) => {
  const { imageTop, imageLeft, imageRight, imageBottom } = bounds
  const position = [(imageTop + imageBottom) / 2, (imageLeft + imageRight) / 2]
  const imageBounds = [{ lat: imageTop, lng: imageLeft }, { lat: imageBottom, lng: imageRight }]

  return (
    <Map
      // @ts-ignore
      bounds={imageBounds}
      className={styles['map-container']}
      zoom={zoom}
      zoomDelta={zoomDelta}
      zoomSnap={zoomSnap}
      minZoom={minZoom}
      zoomControl={zoomControl}
      maxZoom={maxZoom}
      touchZoom={touchZoom}
      zoomAnimation={zoomAnimation}
      attributionControl={attributionControl}
    >
      <TileLayer
        url={tileLayer.url}
        attribution={tileLayer.attribution}

      />

      <Marker
        // @ts-ignore
        position={position}>
        <Popup>A pretty CSS3 popup.<br />Easily customizable.</Popup>
      </Marker>
    </Map>
  )
}
Mapping.defaultProps = defaultProps

export default Mapping

Answer 1

您需要使用接口显式声明 proptypes，因为您使用的是这样的打字稿：

interface IMapping {
  bounds?: [number, number][] | LatLngBounds | undefined;
  tileLayer?: {
    url: string;
    attribution: string;
  };
  zoom?: number;
  minZoom?: number;
  maxZoom?: number;
  touchZoom?: boolean;
  zoomDelta?: number;
  zoomSnap?: number;
  zoomControl?: boolean;
  attributionControl?: boolean;
  zoomAnimation?: boolean;
}

所有这些都需要在包含 Mapping 组件时作为 props 传递。在示例中，我使用 ? 这使得示例不需要道具。如果您不包含使道具可选的 ?，您将收到以下错误：

“Type '{}' is missing in the following properties…”

然后像这样使用它：

const Mapping: React.FC<IMapping> = ....

position、imageBounds 变量等相同...：

const position: [number, number] = [13.298034302, 43.0488191271];

您需要声明变量的类型。

这里 demo 您的大部分代码都包含在类型中，可帮助您开始对项目进行类型声明。

React-Leaflet 显示 TS2769：没有重载匹配此调用。类型错误

React-Leaflet shows TS2769: No overload matches this call. TypeError

leaflet

typescript

reactjs

react-leaflet