typescript - 打字稿和Angular2-highcharts：“对象”类型上不存在属性“系列”

Question

当我尝试在 Angular 中实现以下 plunkr 时，我收到以下错误消息。

Property 'series' does not exist on type 'Object'.

http://plnkr.co/edit/OQSFSKisIIWAH0megy4d?p=preview

我已经安装了“angular2-highcharts”：“^0.5.5”，并输入“@types/highcharts”：“^5.0.5”，

任何帮助，将不胜感激。

Answer 1

当您键入它时，编译器不知道该属性series是否存在。this.optionsObject

要克服这个问题，您可以删除属性的类型（懒惰的方法）：

class AppComponent {

    options: any;
}

或者您可以让编译器通过直接分配它来从对象推断类型，以便this.options正确键入：

class AppComponent {

    options = {
        chart: {
            zoomType: 'xy'
        },
        series: ...
        // ...
    };
}

或者options在接口中定义类型：

interface Options {
    series: any[], // Should be typed to the shape of a series instead of `any`
    // and type other props like "chart", "title"
}
class AppComponent {

    options: Options;

    constructor() {
        this.options = {
            chart: {
                zoomType: 'xy'
            },
            series: ...
            // ...
        };
    }
}

Answer 2

万一有人觉得有用

在您的组件中声明图表，例如

export class DemoComponent {
  chart: Chart;

并在系列中添加类型选项，例如

this.chart = new Chart({
  ...,
  series: [
    {
      name: 'Line 1',
      data: [1, 2, 3],
      type: 'line'
    }
  ]
});

Answer 3

就我而言，要使折线图正常工作，我使用的是[runOutsideAngular]="true".

<highcharts-chart [Highcharts]="Highcharts" [options]="chartOptions.trends" [runOutsideAngular]="true"
            style="width: 100%; height: 300px; display: block;"
            [ngStyle]="{'opacity': chartOptions.trends.series[0].data.length === 0 ? 0 : 1}">
          </highcharts-chart>

这在开发中工作正常，但在生产时它抛出了同样的错误

Property 'data' does not exist on type 'SeriesAbandsOptions'

强制chartOptions.trends转换类型any解决了这个问题。