TypeScriptのコンパイルエラー「型同士で互換性がありません」を解決したい

前提・実現したいこと

Next.js + TypeScriptでタイマーアプリを作っており、
loudFirestoreから取得したデータをグラフ(ApexCharts)のデータとして使おうとしています。
そこで、TypeScriptのコンパイルエラーが起こり、データをグラフ化できておりません。

何らかの対応策があればコメントよろしくお願いいたします。

発生している問題・エラーメッセージ

この呼び出しに一致するオーバーロードはありません。
  2 中 1 のオーバーロード, '(props: Props | Readonly<Props>): ReactApexChart' により、次のエラーが発生しました。
    型 '{ chart: { height: number; type: string; }; dataLabels: { enabled: boolean; }; stroke: { curve: string; }; xaxis: { type: string; labels: { datetimeFormatter: { year: string; month: string; day: string; hour: string; }; }; }; tooltip: { ...; }; }' を型 'ApexOptions' に割り当てることはできません。
      'chart.type' の型は、これらの型同士で互換性がありません。
        型 'string' を型 '"area" | "line" | "bar" | "histogram" | "pie" | "donut" | "radialBar" | "scatter" | "bubble" | "heatmap" | "treemap" | "boxPlot" | "candlestick" | "radar" | "polarArea" | "rangeBar"' に割り当てることはできません。
  2 中 2 のオーバーロード, '(props: Props, context: any): ReactApexChart' により、次のエラーが発生しました。
    型 '{ chart: { height: number; type: string; }; dataLabels: { enabled: boolean; }; stroke: { curve: string; }; xaxis: { type: string; labels: { datetimeFormatter: { year: string; month: string; day: string; hour: string; }; }; }; tooltip: { ...; }; }' を型 'ApexOptions' に割り当てることはできません。ts(2769)

該当のソースコード

JavaScript
1  return (
2    <div id="chart">
3      <ReactApexChart options={state.options} series={state.series} type="area" height={350} />
4    </div>
5  );

補足情報（FW/ツールのバージョンなど）

{
  "name": "pomodoro-clock",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@material-ui/core": "^4.11.4",
    "@material-ui/icons": "^4.11.2",
    "apexcharts": "^3.27.1",
    "chart.js": "^3.3.2",
    "error": "10.4.0",
    "firebase": "^8.6.5",
    "next": "^11.1.0",
    "nookies": "^2.5.2",
    "react": "17.0.2",
    "react-apexcharts": "^1.3.9",
    "react-chartjs-2": "^3.0.3",
    "react-dom": "17.0.2",
    "react-heat-calendar": "^1.1.3",
    "react-lottie-player": "^1.3.1",
    "recharts": "^2.1.1",
    "swiper": "^6.6.2",
    "vue-chartjs": "^3.5.1"
  },
  "devDependencies": {
    "@types/material-ui": "^0.21.8",
    "@types/node": "^15.3.0",
    "@types/react": "^17.0.6",
    "@types/react-dom": "^17.0.5",
    "typescript": "^4.2.4"
  }
}

hoshi-takanori

2021/08/25 22:11

ApexOptions の型が合わないと言ってるので、state.options の値が間違ってるのでは。

nekonekonekko

2021/08/28 13:47

options: { chart: { height: 350, type: 'area', この`chart.type`がString型で、ApexChartsのユニオン型に一致しないというエラーでした。

行動規範の内容に同意します

回答1件

ベストアンサー

ApexOptions 型では、chart プロパティの type プロパティの型はユニオン型です。
ユニオン型は特定の値しか許可しません。
エラーメッセージによると、chart.type で許される値は以下のようです。

"area" | "line" | "bar" | "histogram" | "pie" | "donut" | "radialBar" | "scatter" | "bubble" | "heatmap" | "treemap" | "boxPlot" | "candlestick" | "radar" | "polarArea" | "rangeBar"

今渡そうとしているオブジェクトの型の、chart プロパティの type プロパティは string型を定義していませんか？
string 型は文字列なら何でもOK、 'a' も 'b' も '' もOKです。
これは上記の値しか許さないユニオン型とは一致しません。
そのため、TypeScriptから「型が違うぞ」と怒られているのです。

chart.type の型を string ではなく、上記のユニオン型に変えましょう。

TypeScript
1chart: {
2  height: number;
3  type: "area" | "line" | "bar" | "histogram" | "pie" | "donut" | "radialBar" | "scatter" | "bubble" | "heatmap" | "treemap" | "boxPlot" | "candlestick" | "radar" | "polarArea" | "rangeBar";
4}

もしこのユニオン型を使いまわすことがあるのであれば、独自の名前をつけてもよいですね。

TypeScript
1type ChartType = "area" | "line" | "bar" | "histogram" | "pie" | "donut" | "radialBar" | "scatter" | "bubble" | "heatmap" | "treemap" | "boxPlot" | "candlestick" | "radar" | "polarArea" | "rangeBar";
2interface ApexOptions {
3  chart: {
4    height: number;
5    type: ChartType;
6  };
7  ...
8}