如何解决Google Chart渐进式折线图的TypeScript类型错误？

错误信息 #

类型为 '{ pointSize: number; animation: { startup: boolean; duration: number; easing: string; }; legend: string; hAxis: { viewWindow: { min: number; max: number; }; }; vAxis: { viewWindow: { min: number; max: number; }; }; }' 的参数无法赋值给类型 'LineChartOptions' 的参数。
属性 'legend' 的类型不兼容。
类型 'string' 无法赋值给类型 '"none" | ChartLegend | undefined'。ts(2345)

代码示例 #

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  var rawData = [
    [0, 0],
    [1, 2],
    [2, 1],
    [3, 4],
    [4, 2],
    [5, 8],
    [6, 3],
    [7, 16],
    [8, 4],
    [9, 32]
  ];

  var data = new google.visualization.DataTable({
    "cols": [
      {"id":"","label":"X","type":"number"},
      {"id":"","label":"Y","type":"number"}
    ]
  });

  var options = {
    pointSize: 4,
    animation:{
      startup: true,
      duration: 600,
      easing: 'in'
    },
    legend: 'none',
    hAxis: {
      viewWindow: {
        min: 0,
        max: 9
      }
    },
    vAxis: {
      viewWindow: {
        min: 0,
        max: 32
      }
    }
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart_div')!);

  google.visualization.events.addListener(chart, 'ready', function () {
    drawChart();
  });

  var rowIndex = 0;
  drawChart();
  function drawChart() {
    if (rowIndex < rawData.length) {
      data.addRow(rawData[rowIndex++]);
      chart.draw(data, options);
    }
  }
});

问题描述 #

调用chart.draw(data, options);时，options参数触发上述TypeScript错误，如何解决该错误以成功绘制渐进式折线图？

解决方案 #

错误核心是TypeScript对legend字段的类型校验严格：你写的'none'被识别为普通字符串，但LineChartOptions类型要求legend必须是字面量类型"none"、ChartLegend配置对象或者undefined。

有三种简单修复方式：

1. 添加类型断言
   在调用draw方法时，明确告诉TypeScript参数符合类型要求：

   chart.draw(data, options as google.visualization.LineChartOptions);
   

2. 显式指定变量类型
   定义options时直接指定类型，让TypeScript提前识别：

   const options: google.visualization.LineChartOptions = {
     pointSize: 4,
     animation:{
       startup: true,
       duration: 600,
       easing: 'in'
     },
     legend: 'none',
     hAxis: {
       viewWindow: {
         min: 0,
         max: 9
       }
     },
     vAxis: {
       viewWindow: {
         min: 0,
         max: 32
       }
     }
   };
   

3. 直接传入字面量参数
   把options对象直接写在draw方法参数里，TypeScript会自动推断字面量类型：

   chart.draw(data, {
     pointSize: 4,
     animation:{
       startup: true,
       duration: 600,
       easing: 'in'
     },
     legend: 'none',
     hAxis: {
       viewWindow: {
         min: 0,
         max: 9
       }
     },
     vAxis: {
       viewWindow: {
         min: 0,
         max: 32
       }
     }
   });
   

修复后，你的渐进式折线图逻辑可以正常运行。

内容的提问来源于stack exchange，提问作者dhruv14