R1ZEN / react-yandex-maps

Yandex.Maps API bindings for React (fork https://github.com/gribnoysup/react-yandex-maps)
https://pbe-react-yandex-maps.vercel.app
MIT License
122 stars 20 forks source link

Обновился до последней версии - пропали типы #25

Closed 7iomka closed 2 years ago

7iomka commented 2 years ago

Помогите отрефакторить компонент с новой версией

import { memo } from 'react';
import type { PlacemarkGeometry, MapProps } from '@pbe/react-yandex-maps';
import { Map, Placemark } from '@pbe/react-yandex-maps';

interface YandexPlaceMark {
  geometry: PlacemarkGeometry;
  hintContent?: string;
}

interface YandexMapProps extends MapProps {
  center: PlacemarkGeometry;
  zoom: number;
  placeMarks: YandexPlaceMark[];
  className?: string;
}

const YandexMap = memo((props: YandexMapProps) => {
  const { center, zoom, placeMarks, className, ...rest } = props;
  return (
    <Map
      width="100%"
      height="100%"
      modules={[
        'control.ZoomControl',
        'control.FullscreenControl',
        'geoObject.addon.balloon',
        'geoObject.addon.hint',
      ]}
      state={{
        center,
        controls: ['zoomControl', 'fullscreenControl'],
        zoom,
      }}
      className={className}
      {...rest}
    >
      {placeMarks.map(({ geometry, hintContent }: YandexPlaceMark, index: number) => (
        <Placemark
          // eslint-disable-next-line react/no-array-index-key
          key={index}
          geometry={geometry}
          properties={{
            hintContent,
          }}
          options={{
            iconColor: 'var(--primary)',
          }}
        />
      ))}
    </Map>
  );
});

YandexMap.displayName = 'YandexMap';

export type { YandexMapProps };
export { YandexMap };

Собственно PlacemarkGeometry, MapProps уже недоступны.

R1ZEN commented 2 years ago

@7iomka в вашем случае, можно вынять тип из компонента, таким образом:

type MapProps = React.ComponentProps<typeof Map>;
type PlacemarkGeometry = React.ComponentProps<typeof Placemark>['geometry'];

interface YandexPlaceMark {
  geometry: PlacemarkGeometry;
  hintContent?: string;
}

interface YandexMapProps extends MapProps {
  zoom: number;
  placeMarks: YandexPlaceMark[];
  className?: string;
}

Интерфейсы стали скрытыми в компоненте, что позволяет гибче с ними работать. Так проще добавлять новые интерфейсы и переименовывать старые когда нужно, без изменений в пользовательском коде) Например добавляется HOC и он сам может расширить своими типами интерфейс компонента который ему передается. Но типовой переменной нет, так как он сам выводит новый тип компонента.

7iomka commented 2 years ago

@7iomka в вашем случае, можно вынять тип из компонента, таким образом:

type MapProps = React.ComponentProps<typeof Map>;
type PlacemarkGeometry = React.ComponentProps<typeof Placemark>['geometry'];

interface YandexPlaceMark {
  geometry: PlacemarkGeometry;
  hintContent?: string;
}

interface YandexMapProps extends MapProps {
  zoom: number;
  placeMarks: YandexPlaceMark[];
  className?: string;
}

Интерфейсы стали скрытыми в компоненте, что позволяет гибче с ними работать. Так проще добавлять новые интерфейсы и переименовывать старые когда нужно, без изменений в пользовательском коде) Например добавляется HOC и он сам может расширить своими типами интерфейс компонента который ему передается. Но типовой переменной нет, так как он сам выводит новый тип компонента.

Спасибо Для разработки это может и удобнее, но для юза кастомной обёртки для конечных пользователей стало сложнее типизировать. например я незнаю как мне добраться до 'center' пропса который находится внутри опционального MapProps['state']

7iomka commented 2 years ago

.