Angular Chartjs错误TS2304:找不到名称OffsetcreenConveasRenderingCont

Question

我使用的是带有Angular&离子型：

已安装：

• npm安装chart.js--保存

HTML

<!-- Graph -->
<div class="chart">
<canvas #myChart></canvas>
</div>

TS

import { Chart, registerables } from 'chart.js';
Chart.register(...registerables);

const ctx = this.myChart.nativeElement;
this.chartHolder = new Chart(ctx, {
type: 'doughnut',
data,
options
});

终端错误

ERROR in ../ node_modules / chart.js / types / index.esm.d.ts: 522: 5 - error TS2304: Cannot find name 'OffscreenCanvasRenderingContext2D'.
522 | OffscreenCanvasRenderingContext2D
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
./ node_modules / chart.js / types / index.esm.d.ts: 524: 5 - error TS2304: Cannot find name 'OffscreenCanvas'.
524 | OffscreenCanvas
~~~~~~~~~~~~~~~
./ node_modules / chart.js / types / index.esm.d.ts: 525: 35 - error TS2304: Cannot find name 'OffscreenCanvas'.
525 | { canvas: HTMLCanvasElement | OffscreenCanvas }
~~~~~~~~~~~~~~~
./ node_modules / chart.js / types / index.esm.d.ts: 526: 62 - error TS2304: Cannot find name 'OffscreenCanvas'.
526 | ArrayLike<CanvasRenderingContext2D | HTMLCanvasElement | OffscreenCanvas>;
~~~~~~~~~~~~~~~
./ node_modules / chart.js / types / index.esm.d.ts: 3351: 66 - error TS2315: Type 'DeepPartial' is not generic.
3351 export type ScaleOptions<TScale extends ScaleType = ScaleType> = DeepPartial<ScaleOptionsByType<TScale>>;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
./ node_modules / chart.js / types / index.esm.d.ts: 3365: 65 - error TS2315: Type 'DeepPartial' is not generic.
3365 export type ChartOptions<TType extends ChartType = ChartType> = DeepPartial<
   ~~~~~~~~~~~~
3366   CoreChartOptions<TType> &
~~~~~~~~~~~~~~~~~~~~~~~~~~~
...
3371   ChartTypeRegistry[TType]['chartOptions']
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
3372 >;

Answer 1

我希望我仍然可以帮助你和其他人解决这个问题。

OffscreenCanvas错误的产生是因为它是一种实验技术，如本文所述。

因此，很可能会产生错误、错误、小故障等。根据我自己的经验，我的建议是在node_modules/chart.js/types/index.esm.d.ts(500(:中

export declare type ChartItem =
| string
| CanvasRenderingContext2D
// | OffscreenCanvasRenderingContext2D
| HTMLCanvasElement
// | OffscreenCanvas
| { canvas: HTMLCanvasElement}// | OffscreenCanvas }
| ArrayLike<CanvasRenderingContext2D | HTMLCanvasElement>;// | OffscreenCanvas>;

在DeepPartial发生什么的情况下，在我的情况下我在node_modules / chart.js / types / utils.d.ts中做了什么(13和14(：

13  type _DeepPartialArray<T> = Array<Partial<T>>
14  type _DeepPartialObject<T> = { [P in keyof T]?: Partial<T[P]> };

我所做的是改变

Array<DeepPartial<T>>

至

Array<Partial<T>>

和

{[P in keyof T] ?: DeepPartial<T[P]>}

至

{[P in keyof T] ?: Partial<T[P]>}

由于使用DeepPartial创建了一个循环引用，通常会出现错误，因此我对此的引用是用另一种语言编写的，但无论如何我都会与您分享

https://www.youtube.com/watch?v=aMfvQLLqbzE&ab_channel=makigas%3教程取消编程%C3%B3n

我正在使用chart.js使用MEAN Stack创建一些图表，它给我带来的问题比编译中的任何问题都多，因为图表和应用程序仍然有效。

这是一个真正的解决方案，因为我已经研究了将近一周，你的问题是我在整个互联网上发现的最准确的问题，有完全相同的错误，但仍然没有答案，我想，因为这是最近的事情，还没有影响到大众，所以还没有找到这些错误的真正解决方案或更正。

问候！

Answer 2

尝试将其作为开发依赖项安装在角度应用程序中

npm i @types/offscreencanvas --save-dev