【Recharts】TypeScriptの型エラーを直す「error TS2739: Type ‘{}’ is missing the following properties from type」

Reactのグラフ描画ライブラリ「Recharts」をつかって実装をしていた。

Tooltipのcontentを設定したときに、「yarn typecheck」を実行すると、

「error TS2739: Type ‘{}’ is missing the following properties from type」

のエラーが発生した。
エラーを改善した結果を記載する。

また、本記事のNextjsのバージョンは”13.5.4″、Rchartsのバージョンは”2.10.3″です。

エラーが発生した原因

CustomTooltipに型を定義していないことが原因だったが、どのように定義したら良いのか迷った。

import React from "react";
import {
  LineChart,
  Tooltip,
  ResponsiveContainer,
  TooltipProps,
} from "recharts";

const CustomTooltip = ({
  active,
  payload,
  label,
}) => {
  if (active && payload && payload.length) {
    return (
      <ToolTip>
        <TooltipText>{`${label}`}</TooltipText>
      </ToolTip>
    );
  }

  return null;
};

export function Chart(props: Props) {
  return (
        <ResponsiveContainer width="100%" height="100%">
          <LineChart data={data} margin={chartMargin}>
            ...
            <Tooltip content={<CustomTooltip />} />
          </LineChart>
        </ResponsiveContainer>
  );
}

修正したコード

結論、rechartsが提供している型TooltipPropsで定義すれば良い。

import {
  TooltipProps,
} from "recharts";

import {
  ValueType,
  NameType,
} from "recharts/types/component/DefaultTooltipContent";

全コードはこちら。

import React from "react";
import {
  LineChart,
  Tooltip,
  ResponsiveContainer,
  TooltipProps,
} from "recharts";
import {
  ValueType,
  NameType,
} from "recharts/types/component/DefaultTooltipContent";

const CustomTooltip = ({
  active,
  payload,
  label,
}: TooltipProps<ValueType, NameType>) => {
  if (active && payload && payload.length) {
    return (
      <ToolTip>
        <TooltipText>{`${label}`}</TooltipText>
      </ToolTip>
    );
  }

  return null;
};

export function Chart(props: Props) {
  return (
        <ResponsiveContainer width="100%" height="100%">
          <LineChart data={data} margin={chartMargin}>
            ...
            <Tooltip content={<CustomTooltip />} />
          </LineChart>
        </ResponsiveContainer>
  );
}