javascript - Typescript Interface for Recharts Custom Tooltip

Question

Being not well-versed with Typescript yet, I am trying to create a custom Tooltip content for my Recharts chart in my React app with Typescript. @types/recharts has already been installed as one of the a devDependencies.

However, when I define the CustomTooltip function as shown below, Typescript is throwing an error

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

How can we solve this issue?

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>
)

---

Tried defining an interface, but got another error

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

question from:https://stackoverflow.com/questions/65913461/typescript-interface-for-recharts-custom-tooltip

Answer 1

It usually works for me,but other way could be:

const CustomTooltip = ({ active, payload, label }: any) => {