工具提示回調無法識別元數據 (TS 2339)

Question

賞金將在 5 天后到期。 此問題的答案有資格獲得+50聲望賞金。 這家伙想提請更多人注意這個問題。

我有以下玩具數據：

export const playData = {
  datasets: [
    {
      label: 'Dataset 1',
      showLine: true,
      data: [{ x: 1, y: 10, name: 'John' }, { x: 2, y: 5, name: 'Linda' }, { x: 3, y: 7, name: 'Erin' }, { x: 4, y: 4, name: 'Chloe' }, { x: 5, y: 8, name: 'Paul' }],
      borderColor: 'rgb(255, 99, 132)',
      backgroundColor: 'rgba(255, 99, 132, 0.5)',
    },
    
};

然后我試圖制作一個顯示此數據的自定義工具提示，它按預期工作：

export function Chart(props: { chartData: ChartData }) {
  return <Scatter
    data={props.chartData}
    options={{
      responsive: true,
      scales: {
        x: {
          title: {
            display: true,
            text: 'Age (years)'
          },
        },
        y: {
          title: {
            display: true,
            text: 'Change in Height (inches)'
          }
        }
      },
      plugins: {
        legend: {
          position: 'top' as const,
        },
        tooltip: {
          callbacks: {
            label: (context) => {
              return [context.raw.name, `age: ${context.parsed.x} years`, `height change: ${context.parsed.y} in`]
            }
          }
        }
      },
    }}
  />;
}

但是 TS 在最后的context.raw.name下划線並說

類型“未知”上不存在屬性“名稱”.ts(2339)

我怎樣才能解決這個問題？

Answer 1

您可以通過擴展已在使用的界面並添加您添加到數據集中的自定義選項來創建自己的自定義界面：

import { Chart, TooltipItem  } from 'chart.js';

interface CustomTooltipItem extends TooltipItem<'scatter'> {
  raw: {
    x: number,
    y: number,
    name: string,
  }
}

const ctx = document.getElementById("myChart") as HTMLCanvasElement;
const myChart = new Chart(ctx, {
    type: 'scatter',
    data: {
      datasets: [{
        label: '# of Votes',
        data: [{ x: 1, y: 10, name: 'John' }, { x: 2, y: 5, name: 'Linda' }, { x: 3, y: 7, name: 'Erin' }, { x: 4, y: 4, name: 'Chloe' }, { x: 5, y: 8, name: 'Paul' }],
      }]
    },
    options: {
      plugins: {
        tooltip: {
          callbacks: {
            label: (context: CustomTooltipItem) => {
              return [context.raw.name, `age: ${context.parsed.x} years`, `height change: ${context.parsed.y} in`]
            }
          }
        }
      }
    }
});

https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgYQBYENYBo4BUIQA2MwYAkjAKYhxwC+cAZlBDQOQDGGsAdAFYBnNgG4AsACgJwAHZUojdB0ooArgJit8REuSo1KADyrSAJgLwFipCtQA8bAR3Qw5bAHyIJtKOgDuALk9xWloDQOkVEAAjSigsLxCAT3DImLiE2ml0EEpA9SgZAHN44PoJOgkJDghpdTgOGAM4AF44EwgOSMpZHkLKGABRQmpumAAhRLITAAoAIhBEtEwYWYBKOHRzAAlcAFkAGWR0aQA3TaGR2TFxatr4BaXYFrhpSl8UbhhphoMcBAy4DBEmBcnAHE4XLE2CUQm1nOhAv9SrCTPCBP0BIEANpI2GwwjoGKEQJsADEcAgjDgADUIFQhDC8bRUTAEXAcXAwnAAIw4ZI8gAMOCyORJACkIKhpGx6H9OYEAEx8wIAVmF2VBbH2MlRMrocq5AGZlXAAOzq0VggYFaWyxDyuAAFhNzpeGpJaEIEEoeoNqpNAA4LZqAAroFSEPUAXUZsLoUYB+oBEDAJBqmKCTLAhBUhRkGdxTMBlh0iIBTKchEIUUUAGsC+WiwSiYFvjUqEZAsg1BoQForLpqOtmh5C0W8VB+iooNJ2bcOzAeD5fDwRZQcAADdB9QIAEgQ88Mi7AmHRJh4BgYiUop43m9QlGAhVQ8C4xx3cH3h6MPBPUDPPCJAwMgbgmyLjmU4FMhUUEhDB0GJuUqzCEAA