Typescript реагирует на типы реквизита

Question

Я использую библиотеку реагировать-google-maps для API карт Google. Согласно документации, вот как я использую карты:

const GoogleMapComponent: React.ComponentClass<{}> = compose(
  withProps({
    googleMapURL: "url",
    loadingElement: <div style={{ height: `100%` }} />,
    containerElement: <div style={{ height: `400px` }} />,
    mapElement: <div style={{ height: `100%` }} />,
  }),
  withScriptjs,
  withGoogleMap
)((props) => {
  const {data} = props;
  return(
      <GoogleMap
        defaultZoom={9}
        defaultCenter={{ lat: -34.397, lng: 150.643 }}
      >
        <HeatmapLayer />
      </GoogleMap>
    )
  }
);

Проблема здесь заключается в том, что когда я использую этот компонент, мне нужно передать проп "data", если console.log (props) я могу видеть, что мой data пропущен нормально, но так как я использую машинопись, то машинопись сейчас не об этом проп, это дает мне ошибку, как это:

Property 'data' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<{}, ComponentState, any>> & Readonly<{

По сути, я создаю интерфейс для этого и объявляю свою базу данных, а также создаю реагирующий компонент следующим образом:

const GoogleMapComponent: React.ComponentClass<IProps> 

Тогда я смогу получить доступ к необходимым реквизитам. Проблема здесь, если я пытаюсь передать интерфейс IProps, я получаю это:

Type '{ children?: ReactNode; }' has no property 'data' and no string index signature.

Я считаю, что это из-за метода сочинения.

Я думаю, здесь вопрос заключается в том, чтобы отреагировать на библиотеку google-maps и ее использование с Typescript, так как я считаю, что она должна работать в любом другом случае. Но может быть и нет, может быть, есть хитрость в объявлении моего компонента другим способом.

Answer 1

Работает ли это, если вы набираете реквизиты в функциональном компоненте, который вы передаете для создания, например:

const GoogleMapComponent = compose(
  withProps({
    googleMapURL: "url",
    loadingElement: <div style={{ height: `100%` }} />,
    containerElement: <div style={{ height: `400px` }} />,
    mapElement: <div style={{ height: `100%` }} />,
  }),
  withScriptjs,
  withGoogleMap
)((props: IProps) => {
  const {data} = props;
  return(
    <GoogleMap
      defaultZoom={9}
      defaultCenter={{ lat: -34.397, lng: 150.643 }}
    >
      <HeatmapLayer />
    </GoogleMap>
  );
});