Typescript react dealing with props types

Question

I am using react-google-maps library for Google maps api. According to documentation this is how I use maps:

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>
    )
  }
);

The problem here is that when I use this component I need to pass prop "data", if console.log(props) I can see that my data prop is passed normally, but since I am using typescript, typescript does not now about this prop, it gives me error like that:

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

Basically I create Interface for this and declare my data prop, and create react component like that:

const GoogleMapComponent: React.ComponentClass<IProps>

Then I am able to access necessary props. The problem here, If I try to pass interface IProps, I get this:

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

I believe this is because of compose method.

I think, here the question is more to react-google-maps library and its usage with Typescript, as I believe it should work in any other case. But may be not, maybe there is a trick in declaring my component in other way.

score 0 · Answer 1 · answered May 16 '18 at 07:34

Does it work if you type the props in the functional component you pass to compose eg:

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>
  );
});

Nope, props types (same error) do not match in this case. One way I could do is to pass it via props.children. — yerassyl, May 17 '18 at 05:05

Typescript react dealing with props types

1 Answers1