Typescript和react-google-maps類型錯誤

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; }'. 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>相同，則可以傳遞兩次相同的道具compose<Props, Props>

您不需要像這樣聲明變量const ContactMap: React.ComponentClass<{}>的類型const ContactMap: React.ComponentClass<{}>那樣，因為TS會從函數的結果中自動獲取它