Reactjs Typescript和react谷歌地图类型错误

我是打字的初学者，非常困惑。我有一个使用

react google maps

的组件，该组件是可重用的

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;

并将其传递，但这并不能解决问题。它回来了

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

类型“ComponentClass”不可分配给类型“ComponentClass”。
类型“{}”不可分配给类型“Props”。
类型“{}”中缺少属性“containerElement”。

使用映射的我的组件：

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;

import*as React from'React'；
从'@ecomm/Map'导入{Map}；
从“react google maps”导入{InfoWindow，Marker}；
const ContactMap:React.SFC=（）=>{
返回(
切尔西工作室
);
};
导出默认联系人地图；

---

我不确定从这里走下去，这很令人沮丧。任何帮助都将不胜感激。谢谢。

要解决像您这样的问题，最好检查您使用的函数的定义。 从您的代码片段中，很容易猜测问题在于

compose

的使用，因为它是一个接受组件并返回另一个组件的函数。 有了这些知识，我们可以去 或者检查节点_模块的内部类型。我们有

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

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

导出函数组合(
…函数：函数[]
)：成分增强剂；
接口组件增强器{
（组件：组件）：组件类；
}

所以，基本上你可以传递两种类型，告诉你的innerProps和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
/>

接口内部支柱{
缩放：数字；
中心：编号[]；//它在ContactMap中不能作为道具使用
}
接口外部端口{
缩放：数字；
}
const ContactMap=compose(
withStateHandlers（（）=>({
伊索彭：错，
//tslint:禁用下一行：对齐
}), {
onToggleOpen:（{isOpen}）=>（）=>({
伊索本：！伊索本，
}),
}),
用谷歌地图，
)（道具=>
{props.children}
,
,
);
...

当然，如果相同的道具是相同的

compose

您不需要像这样声明变量

const ContactMap:React.ComponentClass

的类型，因为TS会自动从函数的结果中获取它

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
/>