Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Как правильно использовать с typescript #41

Closed
YasKur opened this issue Nov 29, 2022 · 1 comment
Closed

Как правильно использовать с typescript #41

YasKur opened this issue Nov 29, 2022 · 1 comment

Comments

@YasKur
Copy link

YasKur commented Nov 29, 2022

Откуда нужно добавлять типы для корректной работы ts.

Пример:

const [currentMap, setCurrentMap] = useState<YMapsApi | null>(null);

useEffect(() => {
    // ESLint: Unsafe member access .getBounds on an `any` value.(@typescript-eslint/no-unsafe-member-access)
    if (!currentMap?.geoObjects.getBounds()) {
      return;
    }
    // ESLint: Unsafe member access .getBounds on an `any` value.
    currentMap.setBounds(currentMap.geoObjects.getBounds(), { zoomMargin: 20 });
  }, [currentMap]);

Если посмотреть в типы:

interface AnyObject {
  [key: string]: any;
}

export interface YMapsApi extends AnyObject {}

Такая же проблема будет если будем делать что-то делать с элементами управления:

<SearchControl
              instanceRef={(ref) => {
                setSearchControl(ref);
              }}
>
// ESLint: Unsafe member access .getResultsArray on an `any` value.
const results = searchControl.getResultsArray();

Можно как-то подружить с - https://www.npmjs.com/package/@types/yandex-maps?
Или есть какие-то другие решения?

@R1ZEN
Copy link
Owner

R1ZEN commented Nov 30, 2022

@YasKur библиотека уже имеет зависимость на @types/yandex-maps, чтобы протипизировать ref в вашем случае, можно сделать так:

import { useState } from "react";
import { YMaps, Map, SearchControl } from "@pbe/react-yandex-maps";
import ymaps from "yandex-maps";

export default function App() {
  const [, setSearchControl] = useState<
    ymaps.control.SearchControl | undefined
  >();

  const defaultState = {
    center: [55.751574, 37.573856],
    zoom: 5
  };

  return (
    <YMaps>
      <Map defaultState={defaultState}>
        <SearchControl
          instanceRef={(ref: ymaps.control.SearchControl) => {
            setSearchControl(ref);
          }}
        />
      </Map>
    </YMaps>
  );
}

https://codesandbox.io/s/intelligent-sound-0s4lpv?file=/src/App.tsx

Хорошо бы это конечно инкапсулировать внутрь библиотеки))

@R1ZEN R1ZEN closed this as completed Dec 4, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants