打字和反应谷歌地图类型错误

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>;
}

所以基本上你可以通过两种类型来判断你的内部道具和外部道具

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会自动从函数的结果中提取它