Búsqueda de sitios web

javascript - Interfaz de Typescript para Tooltip Personalizado de Recharts

Al no estar aún bien versado en Typescript, estoy intentando crear un contenido de Tooltip personalizado para mi gráfico de Recharts en mi aplicación React con Typescript. @types/recharts ya ha sido instalado como una de las devDependencies.

Sin embargo, cuando defino la función CustomTooltip como se muestra a continuación, Typescript está generando un error

El elemento de enlace 'active' tiene implícitamente un tipo 'any'. TS7031

¿Cómo podemos resolver este problema?

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

Intenté definir una interfaz, pero obtuve otro error

El tipo ''{}'' no tiene las siguientes propiedades del tipo ''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;
}

Respuesta #1

Intenta hacer lo siguiente (usando los tipos de 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>
);

Respuesta #2

Usar :

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

Cambia number y string por tus tipos de datos. También puedes usarlo con ValueType y NameType, pero tiene más sentido declararlo con tus tipos.

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

Artículos relacionados