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>
);
}
Summary
ライブラリを使う時は型定義に迷うことがあるが、だいたいライブラリの中身を見ていると解決することが多い。
