Typescript and react-google-maps type errors

Question

I'm a beginner with Typescript and very confused. I have a component that uses react-google-maps where the component is reusable.

Map.tsx

import * as React from 'react';
import { compose, withStateHandlers } from 'recompose';
import { GoogleMap, withGoogleMap } from 'react-google-maps';

const ContactMap: React.ComponentClass<{}> = compose(
  withStateHandlers(() => ({
    isOpen: false,
    // tslint:disable-next-line:align
  }), {
      onToggleOpen: ({ isOpen }) => () => ({
        isOpen: !isOpen,
      }),
    }),
  withGoogleMap,
)(props =>
  <div>
    <GoogleMap
      defaultZoom={props.zoom}
      defaultCenter={props.center}
      defaultOptions={{
        streetViewControl: false,
        scaleControl: false,
        mapTypeControl: false,
        panControl: false,
        zoomControl: false,
        rotateControl: false,
        fullscreenControl: false,
        disableDefaultUI: true,
        scrollwheel: false,
      }}
    >
      {props.children}
    </GoogleMap>,
  </div>,
);

export default ContactMap;

And the error is: Property 'zoom' does not exist on type '{ children?: ReactNode; }'. and I assume it'll do the same for center.

I've tried something like

interface Props {
  containerElement: any;
  mapElement: any;
  zoom: number;
  center: any;
}

And passing that in but that doesn't solve the problem. It returns

Type 'ComponentClass<{}>' is not assignable to type 'ComponentClass<Props>'.
  Type '{}' is not assignable to type 'Props'.
    Property 'containerElement' is missing in type '{}'.

My component that uses the map:

import * as React from 'react';
import { Map } from '@ecomm/map';
import { InfoWindow, Marker } from 'react-google-maps';

const ContactMap: React.SFC = () => {
  return (
    <Map
      containerElement={<div style={{ height: `400px` }} />}
      mapElement={<div style={{ height: `100%` }} />}
      center={{
        lat: 40.745093,
        lng: -73.993048,
      }}
      zoom={16}
    >
      <Marker
        position={{
          lat: 40.745093,
          lng: -73.993048,
        }}
      >
        <InfoWindow>
          <TextHeader>CHELSEA STUDIO</TextHeader>
        </InfoWindow>
      </Marker>
    </Map>
  );
};

export default ContactMap;

I'm not sure to go from here and it's frustrating. Any help would be appreciated. Thank you.

Answer 1

To solve the problem like yours it's a good idea to check the definitions of functions which you use. From your snippet, it's easy to guess that the problem is with the usage of the compose because it's a function that takes a component and returns another component. With that knowledge, we can go to https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/recompose/index.d.ts or check inside your node_modules types. Here we have

export function compose<TInner, TOutter>(
     ...functions: Function[]
): ComponentEnhancer<TInner, TOutter>;

interface ComponentEnhancer<TInner, TOutter> {
     (component: Component<TInner>): ComponentClass<TOutter>;
}

so basically you can pass two types that tell what are your innerProps and outerProps

interface InnerProps {
  zoom: number;
  center: number[]; // it will not be available in ContactMap as prop
}
interface OuterProps {
  zoom: number;
}
const ContactMap = compose<InnerProps , OuterProps>(
  withStateHandlers(() => ({
    isOpen: false,
    // tslint:disable-next-line:align
  }), {
      onToggleOpen: ({ isOpen }) => () => ({
        isOpen: !isOpen,
      }),
    }),
  withGoogleMap,
)(props =>
  <div>
    <GoogleMap
      defaultZoom={props.zoom}
      defaultCenter={props.center}
      defaultOptions={{
        streetViewControl: false,
        scaleControl: false,
        mapTypeControl: false,
        panControl: false,
        zoomControl: false,
        rotateControl: false,
        fullscreenControl: false,
        disableDefaultUI: true,
        scrollwheel: false,
      }}
    >
      {props.children}
    </GoogleMap>,
  </div>,
);
...
<ContactMap  
   zoom={5}
   center={[1,3]} // error because it doesnt exist in OuterProps
/>

of course you can pass the same props twice if they are the same compose<Props, Props>

You don't need to declare the type of variable const ContactMap: React.ComponentClass<{}> like that because TS automatically picks it up from the result of the function