Javascript 谷歌地图用TypeScript做出反应。参数错误

所以我对这个文件使用了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: 'xxx'
})(MapContainer)


export default GoogleMap;

import React，{Component}来自“React”
从“google maps react”导入{Map，InfoWindow，Marker，GoogleApiWrapper，mapEventHandler，markerEventHandler}；
从“../customerPage”导入{坐标}
常量映射样式={
宽度：“920px”，
高度：“500px”
}
导出类MapContainer扩展组件{
onMapClicked:mapEventHandler；
在MarkerClick上：markerEventHandler；
OnInfo窗口关闭：任何；
地图？：google.maps.map | google.maps.StreetViewPanorama
render（）{
返回(
{
this.setState（{map:map as google.maps.map}）
}}
style={mapStyle}
onClick={this.onmaclicked}>

报警
解锁
重置

)
}
}
const GoogleMap=谷歌包装器({
apiKey:'xxx'
})（地图容器）
导出默认谷歌地图；

但是，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)

类型为“typeof MapContainer”的参数不能分配给类型为“ComponentType”的参数。
类型“typeof MapContainer”不可分配给类型“ComponentClass”。
构造签名返回类型“MapContainer”和“Component”不兼容。
这些类型之间的“道具”类型不兼容。
类型“Readonly any>&Readonly”不可分配给类型“Readonly&Readonly”。
类型“Readonly any>&Readonly”中缺少属性“google”，但类型“Readonly”中需要属性“google”。ts（2345）

---

这有点令人沮丧。我不明白他们在找什么。我能够让地图与JSX一起工作，但不能与TSX一起工作。我尝试将道具分配给MainContainer，但它没有改变任何东西。

老实说，我没有改变太多。我主要是添加了它要求的参数，它似乎在寻找它缺少的道具。我使用的VisualStudio代码有时也会缓慢地处理错误，这可能会增加一开始出现问题的原因

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: 'xxx'
})(MapContainer)


export default GoogleMap;

import React，{Component}来自“React”
从“google maps react”导入{Map，InfoWindow，Marker，GoogleApiWrapper，mapEventHandler，markerEventHandler}；
从“../customerPage”导入{坐标}
常量映射样式={
宽度：“920px”，
高度：“500px”
}
导出类MapContainer扩展组件{
onMapClicked:mapEventHandler；
在MarkerClick上：markerEventHandler；
OnInfo窗口关闭：任何；
地图？：google.maps.map | google.maps.StreetViewPanorama
render（）{
返回(
{
this.setState（{map:map as google.maps.map}）
}}
style={mapStyle}
onClick={this.onmaclicked}>

报警
解锁
重置

)
}
}
const GoogleMap=谷歌包装器({
apiKey:'xxx'
})（地图容器）
导出默认谷歌地图；

我将粘贴在.TSX上工作的部分代码

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

    // ... 
  }
}

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

类应用程序扩展了React.Component{
构造器（道具：任何）{
超级（道具）；
// ... 
}
}
导出默认GoogleApprapper(
（道具：任何）=>({
apiKey：
}
))（应用程序）

很高兴听到你解决了这个问题！为了让这个答案对未来的读者最有用，你能描述一下需要做什么样的改变吗？感谢you@CherryDT行！非常感谢。这是离题的，但是TypeScript有没有给过你一些关于宽度和高度的问题？我可以改变谷歌地图的高度和宽度，但它仍然像屏幕的高度和宽度一样传播。好像有一个看不见的溢出。我记得我花了一些时间调整地图。主要是css之类的东西。只需确保您的css得到了很好的调整。我使用了位置：绝对，宽度：100%，高度：“计算（100%-3.7rem）”