Typescript error: `Property 'directions' does not exist on type '{ children?: ReactNode; }'.`

[digital-nomad17]

Getting Help

Hi,

I am using the typescript definitions and I am running into this error:

Homestays.tsx
(45,16): Property 'directions' does not exist on type '{ children?: ReactNode; }'.

I copied the code(except the import statements) from the DirectionsRenderer example to test it out. Here is the code:

"/*global googlemaps*/"
import * as React from 'react';
import { compose, lifecycle, withProps} from "recompose";
import {
    GoogleMap,
    withGoogleMap,
    withScriptjs
} from "react-google-maps";
import DirectionsRenderer = google.maps.DirectionsRenderer;


const MapWithADirectionsRenderer = compose(
    withProps({
        containerElement: <div style={{ height: `400px` }} />,
        googleMapURL: "https://maps.googleapis.com/maps/api/js?key=AIzaSyC4R6AN7SmujjPUIGKdyao2Kqitzr1kiRg&v=3.exp&libraries=geometry,drawing,places",
        loadingElement: <div style={{ height: `100%` }} />,
        mapElement: <div style={{ height: `100%` }} />,
    }),
    withScriptjs,
    withGoogleMap,
    lifecycle({
        componentDidMount() {
            const DirectionsService = new google.maps.DirectionsService();

            DirectionsService.route({
                destination: new google.maps.LatLng(41.8525800, -87.6514100),
                origin: new google.maps.LatLng(41.8507300, -87.6512600),
                travelMode: google.maps.TravelMode.DRIVING,
            }, (result, status) => {
                if (status === google.maps.DirectionsStatus.OK) {
                    this.setState({
                        directions: result,
                    });
                } else {
                    // console.error(`error fetching directions ${result}`);
                }
            });
        }
    })
)(props =>
    <GoogleMap
        defaultZoom={7}
        defaultCenter={new google.maps.LatLng(41.8507300, -87.6512600)}
    >
        {props.directions && <DirectionsRenderer directions={props.directions} />}
    </GoogleMap>
);

export default MapWithADirectionsRenderer

It looks like the property isn't defined in the typescript file.

Here's my dependency versions for the record:

{
  "name": "familyhomestay",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.4.0",
    "react-dom": "^16.4.0",
    "react-google-maps": "^9.4.5",
    "react-scripts-ts": "2.16.0",
    "recompose": "^0.27.1"
  },
  "scripts": {
    "start": "react-scripts-ts start",
    "build": "react-scripts-ts build",
    "test": "react-scripts-ts test --env=jsdom",
    "eject": "react-scripts-ts eject"
  },
  "devDependencies": {
    "@types/googlemaps": "^3.30.8",
    "@types/jest": "^22.2.3",
    "@types/markerclustererplus": "^2.1.33",
    "@types/node": "^10.1.4",
    "@types/react": "^16.3.14",
    "@types/react-dom": "^16.0.5",
    "@types/recompose": "^0.26.1",
    "typescript": "^2.8.3"
  }
}

@mxl You might have a better idea of this typescript issue.

[vgrem]

To eliminate this error, try to explicitly specify map component properties.

For that matter the following type could be introduced:

  type MapProps = {
       children?: React.ReactNode,
       directions: google.maps.DirectionsResult
   };

then a map component defined like this:

const Map = (props: MapProps) => {
 return (
     <GoogleMap
         defaultZoom={7}
         defaultCenter={new google.maps.LatLng(41.8507300, -87.6512600)}
     >
         {props.directions && <DirectionsRenderer directions={props.directions} />}
     </GoogleMap>
 );
}

and

const MapWithADirectionsRenderer = compose(
     withProps({
         containerElement: <div style={{ height: `400px` }} />,
         googleMapURL: "https://maps.googleapis.com/maps/api/js?key=AIzaSyC4R6AN7SmujjPUIGKdyao2Kqitzr1kiRg&v=3.exp&libraries=geometry,drawing,places",
         loadingElement: <div style={{ height: `100%` }} />,
         mapElement: <div style={{ height: `100%` }} />,
     }),
     withScriptjs,
     withGoogleMap,
     lifecycle({
         componentDidMount() {
             const DirectionsService = new google.maps.DirectionsService();
 
 
             DirectionsService.route({
                 destination: new google.maps.LatLng(41.8525800, -87.6514100),
                 origin: new google.maps.LatLng(41.8507300, -87.6512600),
                 travelMode: google.maps.TravelMode.DRIVING,
             }, (result, status) => {
                 if (status === google.maps.DirectionsStatus.OK) {
                     this.setState({
                         directions: result,
                     });
                 } else {
                     console.log(`error fetching directions ${result}`);
                 }
             });
         }
     })
 )(Map);

[amon-shadow]

Argument of type '(props: MapProps) => Element' is not assignable to parameter of type 'ComponentType'. Type '(props: MapProps) => Element' is not assignable to type 'FunctionComponent'. Types of parameters 'props' and 'props' are incompatible. Property 'directions' is missing in type '{ children?: ReactNode; }' but required in type 'MapProps'.ts(2345)