javascript - Recharts 自定义工具提示的 Typescript 界面

Question

还不精通 Typescript，我正在尝试 create a custom Tooltip content在我的 React 应用程序中使用 Typescript 获取我的 Recharts 图表。 @types/recharts已作为 devDependencies 之一安装.
但是，当我定义 CustomTooltip函数如下图，Typescript 报错

Binding element 'active' implicitly has an 'any' type. TS7031

我们如何解决这个问题？

const CustomTooltip = ({ active, payload, label }) => {
    if (active) {
        return (
        <div className="custom-tooltip">
            <p className="label">{`${label} : ${payload[0].value}`}</p>
            <p className="desc">Anything you want can be displayed here.</p>
        </div>
        );
    }

    return null;
}

return (
    <ComposedChart data={data}>
        ...
        <Tooltip content={<CustomTooltip />} />
    </ComposedChart>
)

尝试定义接口(interface)，但又出现了一个错误

Type '{}' is missing the following properties from type 'ICustomToolip': active, payload, label TS2739

interface ICustomToolip {
    active: any;
    payload: any;
    label: any;
}

const CustomTooltip = ({ active, payload, label }: ICustomToolip) => {
    if (active) {
        return (
        <div className="custom-tooltip">
            <p className="label">{`${label} : ${payload[0].value}`}</p>
            <p className="desc">Anything you want can be displayed here.</p>
        </div>
        );
    }

    return null;
}

Answer 1

尝试执行以下操作(使用 rechart 的类型)。
但请记住，您必须添加 @types/recharts npm 包；)

import { TooltipProps } from 'recharts';
import {
  ValueType,
  NameType,
} from 'recharts/src/component/DefaultTooltipContent';

const CustomTooltip = ({
  active,
  payload,
  label,
}: TooltipProps<ValueType, NameType>) => {
  if (active) {
    return (
      <div className="custom-tooltip">
        <p className="label">{`${label} : ${payload?.[0].value}`}</p>
        <p className="desc">Anything you want can be displayed here.</p>
      </div>
    );
  }

  return null;
};

return (
  <ComposedChart data={data}>
    ...
    <Tooltip content={<CustomTooltip />} />
  </ComposedChart>
);