如何将 Chart.js 与 Typescript 一起使用而不会出现可分配的错误？答案

【问题标题】：How to use Chart.js with Typescript without getting assignable errors?如何将 Chart.js 与 Typescript 一起使用而不会出现可分配的错误？
【发布时间】：2018-07-22 01:58:23
【问题描述】：

我正在尝试在我的 Angular 应用程序中使用带有 Typescript 的库 Chart.js，但出现以下错误：

Error: Object literal may only specify known properties, and 'stepSize' does not exist in type 'TickOptions'.

查看TickOptions接口，该属性确实不存在，但它在另一个扩展TickOptions的接口上，接口LinearTickOptions：

interface LinearTickOptions extends TickOptions {
    maxTicksLimit?: number;
    stepSize?: number;
    suggestedMin?: number;
    suggestedMax?: number;
}

如何让 Typescript 寻找接口LinearTickOptions 而不是TickOptions？这是显示错误的代码：

new Chart(this.clientsPerMonthElement.nativeElement, {
  type: 'line',
  data: {
    labels,
    datasets: [{
      data,
      label: 'Clientes no mês',
      backgroundColor: 'transparent',
      borderColor: lineColor,
      borderWidth: 2,
      pointBackgroundColor: lineColor,
      pointRadius: 4,
    }],
  },
  options: {
    legend: {
      display: false,
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true,
          stepSize: 1, // I'm getting an error here
        },
      }],
    },
  },
});

【问题讨论】：

你能发布完整的组件代码关于你如何导入chartjs
@Sajeetharan，从 'chart.js' 导入 * 作为图表；
我有完全相同的问题
这里有同样的问题，任何有解决方案的人。我无法构建我的项目
@IvoBogoevski，我无法解决，所以我现在删除了类型定义依赖项。

标签： angular typescript chart.js chart.js2

【解决方案1】：

遇到了同样的问题，但我找到了解决方案

您还需要从“chart.js”导入LinearTickOptions

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

然后您需要创建一个保存此信息的变量

xAxisTickOptions: LinearTickOptions = {
  min: 0,
  stepSize: 0.02,
};

如果使用具有不同步长值的 X 和 Y（显然），您将需要分隔变量

从那里我们可以去引用选项对象中的变量

xAxes: [
       {
         type: 'linear', //optional
         ticks: this.xAxisTickOptions,
         ...
        }
      ]

一切都应该从那里自行解决。我对此原因的最佳猜测是因为 Axes 实现了 TickOptions | LinearTickOptions | ... 。所以它只会抓住第一个选项，除非你想在刻度对象中实现整个 LinearTickOptions 接口

希望这会有所帮助:)

【讨论】：

似乎将所有内容更新到最新版本，错误已解决。这里不需要导入 LinearTickOptions。