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組件時，所有這些都需要作為道具傳遞。 在我使用的例子中? 這使得在示例中不需要道具。 如果不包括? 這使道具可選，您將收到以下錯誤：

“以下屬性中缺少類型 '{}'...”

然后像這樣使用它：

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

與position 、 imageBounds變量等相同...：

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

您需要聲明變量的類型。

這是一個演示，其中大部分代碼都包含在類型中，以幫助您開始對項目進行類型聲明。