Реферат-листовка показывает TS2769: перегрузка не соответствует этому вызову. typerror - PullRequest
Новая
       28

Реферат-листовка показывает TS2769: перегрузка не соответствует этому вызову. typerror

0 голосов
/ 11 марта 2020

Я создал компонент отображения, используя react-leaflet, и он работает очень хорошо, однако его можно будет собрать только в том случае, если я добавлю строки @ts-ignore в примере ниже. Если я не получаю, я получаю сообщение об ошибке:

TS2769: No overload matches this call.

Если вывести значение postition, я получу [13.298034302, 43.0488191271] и imageBounds даст me [{lat: 14.194809302, lng: 42.3558566271}, {lat: 12.401259302, lng: 43.7417816271}] (Я также пробовал это как массив значений без объекта с тем же результатом.

Я не вижу, где я иду не так, и я бы предпочел не публиковать sh код с @ 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

1 Ответ

1 голос
/ 12 марта 2020

Вам необходимо явно объявить проптипы с помощью интерфейса, поскольку вы используете машинописный текст, подобный следующему: 

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 переменных и т. Д. c ...: 

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

вам необходимо объявить тип переменной.

Вот демо с большей частью вашего кода, включенного в типы, чтобы помочь вам начать работу с объявлением типов в вашем проекте.

...