Google-Maps -Работа с TypeScript. Ошибка с параметрами

Question

Итак, я использую TypeScript для этого файла.

import React, {Component} from 'react'
import {Map, InfoWindow, Marker, GoogleApiWrapper, mapEventHandler, markerEventHandler} from 'google-maps-react';
import { coordinates } from '../customerPage'

const mapStyle = {
    width: '920px',
    height: '500px'
}

export class MapContainer extends Component{
    onMapClicked: mapEventHandler;
    onMarkerClick: markerEventHandler;
    onInfoWindowClose: any;
    map?: google.maps.Map | google.maps.StreetViewPanorama

    render(){
        return(
            <>
                <Map google={google} 
                     zoom={16}
                     draggable
                     initialCenter={{
                        lat: coordinates.latitude,
                        lng: coordinates.longitude
                     }}
                     onReady={(mapProps, map) => {
                        this.setState({ map: map as google.maps.Map})
                    }}
                     style={mapStyle}
                     onClick={this.onMapClicked}>
                
                    <Marker onClick={this.onMarkerClick}
                            title={`Location of ...`} />
                </Map>
                <p className="float-left md:ml-0 mt-64 lg:ml-48 sm:pt-64 lg:pt-64">
                    <button className="bg-white hover:bg-gray-200 text-gray-800 font-semibold py-3 px-5 border border-gray-400 rounded shadow">Alarm</button>
                    <button className="bg-white hover:bg-gray-200 text-gray-800 font-semibold py-3 px-5 border border-gray-400 xs:ml-20 sm:ml-20 md:ml-32 lg:ml-40 rounded shadow">Unlock</button>
                    <button className="bg-white hover:bg-gray-200 text-gray-800 font-semibold py-3 px-5 border border-gray-400 xs:ml-20 sm:ml-20 md:ml-32 lg:ml-40 rounded shadow">Reset</button>
                </p>
            </>
        )
    }
}

const GoogleMap = GoogleApiWrapper({
    apiKey: 'AIzaSyCpjMFvOLzbKYy5E7A4uHZH9xGnDP77eHw'
})(MapContainer)


export default GoogleMap;

Однако в последней функции MapContainer возникает ошибка:

Argument of type 'typeof MapContainer' is not assignable to parameter of type 'ComponentType<IProvidedProps>'.
  Type 'typeof MapContainer' is not assignable to type 'ComponentClass<IProvidedProps, any>'.
    Construct signature return types 'MapContainer' and 'Component<IProvidedProps, any, any>' are incompatible.
      The types of 'props' are incompatible between these types.
        Type 'Readonly<(props: any, mapStyle: any) => any> & Readonly<{ children?: ReactNode; }>' is not assignable to type 'Readonly<IProvidedProps> & Readonly<{ children?: ReactNode; }>'.
Property 'google' is missing in type 'Readonly<(props: any, mapStyle: any) => any> & Readonly<{ children?: ReactNode; }>' but required in type 'Readonly<IProvidedProps>'.ts(2345)

Это немного расстраивает. Я не понимаю, что они ищут. Мне удалось заставить карту работать с JSX, но не с TSX. Я пытаюсь назначить props для MainContainer, но это ничего не меняет ..

Answer 1

Я вставлю часть своего кода, который работает на .TSX

class App extends React.Component<any, any> {
  constructor(props: any) {
    super(props);

    // ... 
  }
}

export default GoogleApiWrapper(
  (props: any) => ({
    apiKey: <your_key>
  }
))(App)

Answer 2

Честно говоря, я особо не изменился. Я в первую очередь добавил параметр <{google}>, который он запрашивал, и, похоже, он искал пропавшую опору. Я использую Visual Studio Code, который также иногда медленно обрабатывает ошибки для меня, что может добавить к тому, почему возникла проблема в первую очередь.

import React, {Component} from 'react'
import {Map, InfoWindow, Marker, GoogleApiWrapper, mapEventHandler, markerEventHandler} from 'google-maps-react';
import { coordinates } from '../customerPage'

const mapStyle = {
    width: '920px',
    height: '500px'
}

export class MapContainer extends Component<{google}>{
    onMapClicked: mapEventHandler;
    onMarkerClick: markerEventHandler;
    onInfoWindowClose: any;
    map?: google.maps.Map | google.maps.StreetViewPanorama

    render(){
        return(
            <>
                <Map google={google} 
                     zoom={16}
                     draggable
                     initialCenter={{
                        lat: coordinates.latitude,
                        lng: coordinates.longitude
                     }}
                     onReady={(mapProps, map) => {
                        this.setState({ map: map as google.maps.Map})
                    }}
                     style={mapStyle}
                     onClick={this.onMapClicked}>
                
                    <Marker onClick={this.onMarkerClick}
                            title={`Location of ...`} />
                </Map>
                <p className="float-left md:ml-0 mt-64 lg:ml-48 sm:pt-64 lg:pt-64">
                    <button className="bg-white hover:bg-gray-200 text-gray-800 font-semibold py-3 px-5 border border-gray-400 rounded shadow">Alarm</button>
                    <button className="bg-white hover:bg-gray-200 text-gray-800 font-semibold py-3 px-5 border border-gray-400 xs:ml-20 sm:ml-20 md:ml-32 lg:ml-40 rounded shadow">Unlock</button>
                    <button className="bg-white hover:bg-gray-200 text-gray-800 font-semibold py-3 px-5 border border-gray-400 xs:ml-20 sm:ml-20 md:ml-32 lg:ml-40 rounded shadow">Reset</button>
                </p>
            </>
        )
    }
}

const GoogleMap = GoogleApiWrapper({
    apiKey: 'AIzaSyCpjMFvOLzbKYy5E7A4uHZH9xGnDP77eHw'
})(MapContainer)


export default GoogleMap;