Recharts 自定义工具提示的 Typescript 接口

Question

由于还不熟悉 Typescript，我正在尝试使用Typescript 在我的 React 应用程序中为我的 Recharts 图表创建自定义工具提示内容。@types/recharts已作为 a 之一安装devDependencies。

但是，当我定义CustomTooltip如下所示的函数时，Typescript 抛出错误

绑定元素“active”隐式具有“any”类型。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>
)

---

尝试定义接口，但出现另一个错误

类型“{}”缺少类型“ICustomToolip”中的以下属性：活动、有效负载、标签 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 的类型）。

import { TooltipProps } from 'recharts';
// for recharts v2.1 and above
import {
    ValueType,
    NameType,
} from 'recharts/types/component/DefaultTooltipContent';
// for recharts versions below v2.1
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>
);

Answer 2

使用：

const CustomTooltip = ({ active, payload, label }: TooltipProps<number, string>): JSX.Element => {

将数字和字符串更改为您的数据类型。您还可以将其与 ValueType 和 NameType 一起使用，但与您的类型一起声明它更有意义。

const CustomTooltip = ({ active, payload, label }: TooltipProps<ValueType, NameType>): JSX.Element => {