* 如何在不破坏index.esm.d.ts文件的情况下实现下面提到的数据集的自定义属性数据结构？*

我想在折线图中实现一个类似于这里的自定义数据集数据结构。我在Angular中使用ng2-charts来实现。

相关库版本：

"@angular/core": "^14.2.0"
"@types/chart.js": "^2.9.37"
"chart.js": "^3.9.1"
"ng2-charts": "^4.0.1"
"typescript": "~4.7.2"
"tslib": "^2.3.0",

下面是我想要实现的数据集数据结构的简化版本：

data: [
  {id: '1', nested: {value: 500, extra: 'one'}},
  {id: '2', nested: {value: 1500, extra: 'two'}},
],

不幸的是，我在实现时遇到了以下打字错误：error TS2322: Type '{ id: string; nested: { value: number; extra: string; }; }' is not assignable to type 'number | ScatterDataPoint | BubbleDataPoint | null'.

如果我使用CustomDataPoint修改index.esm.d.ts文件：

export interface CustomDataPoint {
  id: string,
  nested: {
    value: number,
    extra: string
  }
}

export interface ChartTypeRegistry {
...

line: {
  chartOptions: LineControllerChartOptions;
  datasetOptions: LineControllerDatasetOptions & FillerControllerDatasetOptions;
  defaultDataPoint: CustomDataPoint | ScatterDataPoint | number | null; //### modified
  // defaultDataPoint: ScatterDataPoint | number | null; //### original
  metaExtensions: {};
  parsedDataType: CartesianParsedData;
  scales: keyof CartesianScaleTypeRegistry;
};

...
}

我不再得到打字错误。耶！P）的

* 如何在不破坏index.esm.d.ts文件的情况下实现上述数据集的自定义属性数据结构？*

这里是一个最小的代码集来重现这个...

折线图.组件.ts：

import { Component, OnInit } from '@angular/core';
import {ChartConfiguration, ChartType} from "chart.js";

@Component({
  selector: 'app-chart-one',
  templateUrl: './chart-one.component.html',
  styleUrls: ['./chart-one.component.css']
})
export class ChartOneComponent implements OnInit {

  public chartData: ChartConfiguration['data'] = {
    datasets: []
  };

  public chartOptions: ChartConfiguration['options'];

  public chartType: ChartType = 'line';

  constructor() {}

  ngOnInit(): void {
    this.chartData.datasets = [
      {
        data: [
          {id: '1', nested: {value: 500, extra: 'one'}}, //TS Error here
          {id: '2', nested: {value: 1500, extra: 'two'}}, //TS Error here
        ],
        label: 'set 1',
        borderColor: '#3cba9f',
        fill: false,
      }
    ]

    this.chartOptions = {
      responsive: true,
      parsing: {
        xAxisKey: 'id',
        yAxisKey: 'nested.value'
      },
    };
  }
}

线条图.组件.html：

<div style="display: block">
  <canvas baseChart
          [data]="chartData"
          [options]="chartOptions"
          [type]="chartType">
  </canvas>
</div>