打字稿 - 反应没有重载匹配这个调用

Question

1. 我正在尝试使用 Nivo 实现 Choropleth（世界地图） 图书馆'。

2. 我使用 Typescript-React，当我添加图例时，我是 得到一个错误。我可能不擅长打字稿，这很容易，但我无法解决这个问题

3. 如果我改成'.jsx' 问题解决了，但我是 在反应项目中使用打字稿。我的错误是这样的：

---

(JSX attribute) legends: {
    anchor: string;
    direction: string;
    justify: boolean;
    translateX: number;
    translateY: number;
    itemsSpacing: number;
    itemWidth: number;
    itemHeight: number;
    itemDirection: string;
    itemTextColor: string;
    itemOpacity: number;
    symbolSize: number;
    effects: {
        ...;
    }[];
}[]
No overload matches this call.
  Overload 1 of 2, '(props: ChoroplethProps | Readonly<ChoroplethProps>): ResponsiveChoropleth', gave the following error.
    Type '{ data: { id: string; value: number; }[]; features: ({ type: string; properties: { name: string; }; geometry: { type: string; coordinates: number[][][]; }; id: string; } | { type: string; properties: { name: string; }; geometry: { ...; }; id: string; })[]; ... 12 more ...; legends: { ...; }[]; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<ResponsiveChoropleth> & Readonly<ChoroplethProps> & Readonly<...>'.
      Property 'legends' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<ResponsiveChoropleth> & Readonly<ChoroplethProps> & Readonly<...>'.
  Overload 2 of 2, '(props: ChoroplethProps, context: any): ResponsiveChoropleth', gave the following error.
    Type '{ data: { id: string; value: number; }[]; features: ({ type: string; properties: { name: string; }; geometry: { type: string; coordinates: number[][][]; }; id: string; } | { type: string; properties: { name: string; }; geometry: { ...; }; id: string; })[]; ... 12 more ...; legends: { ...; }[]; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<ResponsiveChoropleth> & Readonly<ChoroplethProps> & Readonly<...>'.
      Property 'legends' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<ResponsiveChoropleth> & Readonly<ChoroplethProps> & Readonly<...>'.

我的代码在这里：

import mapData from './datas/mapData';
import countries from './datas/world_countries.json';

// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
const MyResponsiveChoropleth = () => (
  <ResponsiveChoropleth
    data={mapData}
    features={countries.features}
    margin={{ top: 0, right: 0, bottom: 0, left: 0 }}
    colors='reds'
    domain={[0, 1000000]}
    unknownColor='#666666'
    label='properties.name'
    valueFormat='.2s'
    projectionTranslation={[0.5, 0.5]}
    projectionRotation={[0, 0, 0]}
    enableGraticule={true}
    graticuleLineColor='#dddddd'
    borderWidth={0.5}
    borderColor='#152538'
    legends={[
      {
        anchor: 'bottom-left',
        direction: 'column',
        justify: true,
        translateX: 80,
        translateY: -57,
        itemsSpacing: 1,
        itemWidth: 85,
        itemHeight: 18,
        itemDirection: 'left-to-right',
        itemTextColor: '#444444',
        itemOpacity: 0.85,
        symbolSize: 16,
        effects: [
          {
            on: 'hover',
            style: {
              itemTextColor: '#000000',
              itemOpacity: 1,
            },
          },
        ],
      },
    ]}
  />
);



export default MyResponsiveChoropleth;