Question

我在React Typescript中有一个google maps组件，在我添加样式之前一切似乎都可以正常工作。完成后，它会返回一系列类型错误。

Map.tsx

import { mapStyles } from './styles';
import { GoogleMap, withGoogleMap } from 'react-google-maps';

type Props = {
  containerElement: any;
  mapElement: any;
  mapStyles: any; // is this a problem?
};

const options = {
  styles: mapStyles,
  streetViewControl: false,
  scaleControl: false,
  mapTypeControl: false,
  panControl: false,
  zoomControl: false,
  rotateControl: false,
  fullscreenControl: false,
};

const ContactMap: React.ComponentClass = withGoogleMap((props: Props) =>
  <GoogleMap
    defaultZoom={16}
    defaultCenter={{ lat: 40.745093, lng: -73.993048 }}
    defaultOptions={options} // error happens here
  />,
);

export default ContactMap;

返回的错误是一堆类型错误：

Type '{ defaultZoom: number; defaultCenter: { lat: number; lng: number; }; defaultOptions: { styles: ({...' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<GoogleMap> & Readonly<{ children?: ReactNode; }> &...'.
  Type '{ defaultZoom: number; defaultCenter: { lat: number; lng: number; }; defaultOptions: { styles: ({...' is not assignable to type 'Readonly<GoogleMapProps>'.
    Types of property 'defaultOptions' are incompatible.
      Type '{ styles: ({ 'featureType': string; 'elementType': string; 'stylers': ({ 'color': string; lightne...' is not assignable to type 'MapOptions | undefined'.
        Type '{ styles: ({ 'featureType': string; 'elementType': string; 'stylers': ({ 'color': string; lightne...' is not assignable to type 'MapOptions'.

在我的./styles.ts文件中，我从https://snazzymaps.com/复制了一些内容

export const mapStyles = [
  {
    'featureType': 'water',
    'elementType': 'geometry',
    'stylers': [
      {
        'color': '#e9e9e9',
      },
      {
        'lightness': 17,
      },
    ],
  },
  {
    'featureType': 'landscape',
    'elementType': 'geometry',
    'stylers': [
      {
        'color': '#f5f5f5',
      },
      {
        'lightness': 20,
      },
    ],
  },
  {
    'featureType': 'road.highway',
    'elementType': 'geometry.fill',
    'stylers': [
      {
  // .... A bunch of styles

但是我不确定从这里继续前进。是否为样式提供接口/类型定义？

键入样式问题react-google-maps和打字稿

0 个答案: