[Bug] failed to import klinecharts in Angular

[Botong Zhu]

Version

9.5.1

Steps to Reproduce

1. run npm install klinecharts --save
2. build a component using klinecharts, for example:

kline-chart.component.ts

import {AfterViewInit, Component, OnDestroy} from '@angular/core';
import { init, dispose, Chart, Nullable, CandleType } from 'klinecharts';

@Component({
  selector: 'app-kline-chart',
  templateUrl: './kline-chart.component.html',
  styleUrls: ['./kline-chart.component.css']
})
export class KlineChartComponent implements AfterViewInit, OnDestroy {

  private chart: Nullable<Chart> = null;

  ngAfterViewInit(): void {
    this.chart = init('chart-type-k-line');
    this.chart?.applyNewData([
      { close: 4976.16, high: 4977.99, low: 4970.12, open: 4972.89, timestamp: 1587660000000, volume: 204 },
      { close: 4977.33, high: 4979.94, low: 4971.34, open: 4973.20, timestamp: 1587660060000, volume: 194 },
      { close: 4977.93, high: 4977.93, low: 4974.20, open: 4976.53, timestamp: 1587660120000, volume: 197 },
      { close: 4966.77, high: 4968.53, low: 4962.20, open: 4963.88, timestamp: 1587660180000, volume: 28 },
      { close: 4961.56, high: 4972.61, low: 4961.28, open: 4961.28, timestamp: 1587660240000, volume: 184 },
      { close: 4964.19, high: 4964.74, low: 4961.42, open: 4961.64, timestamp: 1587660300000, volume: 191 },
      { close: 4968.93, high: 4972.70, low: 4964.55, open: 4966.96, timestamp: 1587660360000, volume: 105 },
      { close: 4979.31, high: 4979.61, low: 4973.99, open: 4977.06, timestamp: 1587660420000, volume: 35 },
      { close: 4977.02, high: 4981.66, low: 4975.14, open: 4981.66, timestamp: 1587660480000, volume: 135 },
      { close: 4985.09, high: 4988.62, low: 4980.30, open: 4986.72, timestamp: 1587660540000, volume: 76 }
    ]);
  }

  ngOnDestroy(): void {
    dispose('chart-type-k-line');
  }
}

kline-chart.component.html

<div
  class="k-line-chart-container">
  <h3
    class="k-line-chart-title">title</h3>

  <div id="chart-type-k-line" class="k-line-chart"></div>
</div>

4. run ng serve

Current Behavior

throws error:

Error: node_modules/klinecharts/types/index.d.ts:743:2 - error TS2416: Property 'update' in type 'Widget<C>' is not assignable to the same property in base type 'Updater'.
  Type '(level: UpdateLevel) => void' is not assignable to type '(level?: UpdateLevel | undefined) => void'.
    Types of parameters 'level' and 'level' are incompatible.
      Type 'UpdateLevel | undefined' is not assignable to type 'UpdateLevel'.
        Type 'undefined' is not assignable to type 'UpdateLevel'.

743  update(level: UpdateLevel): void;
     ~~~~~~

Expected Behavior

Project start normally without error.

Environment

- OS: Windows 10
- Browser: N/A
- Framework: Angular 16.1.0

Any additional comments?

Seems klinecharts under 9.5.1 will also cause this error.

[lihu]

Temporary solution, modify file node_modules/klinecharts/types/index.d.ts, line 734,
update(level?: UpdateLevel): void

[Botong Zhu]

Temporary solution, modify file node_modules/klinecharts/types/index.d.ts, line 734, update(level?: UpdateLevel): void

You mean line 743? Thank you for the suggestion and it works for now.