Блог

Попытка написать шаблон/веб-компонент React, который использует Chart.js Я наткнулся на ввод переменных конфигурации для ChartConfiguration.options . В частности, применение правильных типов для scales атрибута проблематично.

Теперь это выглядит так:

 private chartConfig: ChartConfiguration = {
  type: 'scatter',
  data: {
    datasets: [],
  },
  options: {},
};
private scaleOptions = {
  years: {
    type: 'time',
    adapters: {
      date: {
        locale: enUS,
      },
    },
    time: {
      unit: 'year',
      tooltipFormat: 'yyyy',
    },
    bounds: 'data',
    position: 'bottom',
  } as ScaleOptionsByType<'time'>,
  score: {
    type: 'linear',
    bounds: 'ticks',
    min: 0,
    max: 10,
    position: 'left',
  } as ScaleOptionsByType<'linear'>,
};
// Use it ...
private setChartScaleOptions() {
  this.chartConfig.options.scales = this.scaleOptions;
}
private drawChart() {
  new Chart(this.canvas, this.chartConfig);
}
 

Использование ScaleOptionsByType интерфейса с as оператором таким образом кажется грязным.
Я бы предпочел определить каждый вариант масштабирования отдельно с прямыми наборами, такими как этот:

 private yearsScaleOptions: ScaleOptionsByType<'time'> = {
  type: 'time',
  adapters: {
    date: {
      locale: enUS,
    },
  },
  time: {
    unit: 'year',
    tooltipFormat: 'yyyy',
  },
  bounds: 'data',
  position: 'bottom',
}
private scoreScale: ScaleOptionsByType<'linear'> = {
  type: 'linear',
  bounds: 'ticks',
  min: 0,
  max: 10,
  position: 'left',
}
// Use it ...
private setChartScaleOptions() {
  this.chartConfig.options.scales = {
    years: this.yearsScaleOptions,
    score: this.scoreScaleOptions,
  };
}
 

Но это бросит (2/2) Type '{ type: "linear"; ...} is not assignable to {...} is missing the following properties from type 'CartesianScaleOptions': axis, offset, grid, title, and 19 more. .

Такое ощущение, что эти расширенные типизации непригодны для использования, поскольку во время компиляции им требуется слишком много атрибутов, которые не требуются для выполнения кода. Что я упускаю?