Typescript 和 Angular2-highcharts：属性 'series' 在类型 'Object' 上不存在

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

当您键入 Object 时，编译器不知道属性 series 是否出现在 this.options 中。

为了克服这个问题，您可以删除属性的输入（懒惰的出路）：

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>

这在 dev 中工作正常，但在生产时它抛出相同的错误

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

将 chartOptions.trends 转换为键入 any 解决了问题。

Typescript 和 Angular2-highcharts：属性 'series' 在类型 'Object' 上不存在

Typescript and Angular2-highcharts: Property 'series' does not exist on type 'Object'

typescript

angular2-highcharts