Question

我是Typescript的初学者，非常困惑。我有一个使用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;

错误是：Property 'zoom' does not exist on type '{ children?: ReactNode; }'.，我认为它会与center相同。

我尝试过类似的事情

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

并将其传入，但不能解决问题。它返回

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

我使用地图的组件：

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;

我不确定从这儿走，这令人沮丧。任何帮助，将不胜感激。谢谢。

Answer 1

要解决像您这样的问题，最好检查使用的函数的定义。从您的代码片段中，很容易猜到问题出在compose的使用上，因为它是一个接受一个组件并返回另一个组件的函数。有了这些知识，我们可以转到https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/recompose/index.d.ts 或检查您的node_modules类型。这里有

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

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

因此，基本上，您可以传递两种类型的参数，以告诉您什么是innerProps和externalProps

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

如果相同的道具compose<Props, Props>

当然可以通过两次

您不需要像这样声明变量const ContactMap: React.ComponentClass<{}>的类型，因为TS会从函数的结果中自动选择它

Typescript和react-google-maps类型错误

1 个答案: