AngularX TSエラータイプにコールシグネチャがない式を呼び出せません

Question

このようなコンポーネントを作成していて、サーブ/ビルドにエラーが発生しています。 いくつかのコメント投稿者が考えているように、コンソールのエラーと混同しないでください。 予想される動作は、ビルドと実行のコードです。解決foreachの機能で

TS error TS2349: Cannot invoke an expression whose type lacks a call signature 

import { Component, OnInit, Input } from '@angular/core'; 
    import { ChartInput, MultiChartInput, ChartColorScheme } from "@shared/models/chart-input"; 

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

     @Input() 
     public chartInput: ChartInput[] | MultiChartInput[]; 
     @Input() 
     public legendColors: ChartColorScheme; 

     public legends: Map<string, string> = new Map<string, string>(); 
     constructor() { } 

     ngOnInit() { 
      this.chartInput.forEach(
       (item, index) => { 
        this.legends.set(item.name, this.legendColors.domain[index]); 
       }); 
      } 
     } 

export class ChartInput { 
    name: string; 
    value: number; 

} 
export class MultiChartInput { 
    name: string; 
    series: ChartInput[]; 
} 
export class ChartColorScheme { 
    domain: string[]; 
} 

ngOnInit()で任意の助けが理解されます。 誰かがこれがこのquestionに関連していると思っている場合。説明してください。私はそうは思わない。

Answer 1

これは、ユニオンタイプ（Microsoft/TypeScript - Issue #7294）を使用する場合に発生することが知られています。 issue commentで説明したように：

This is currently by design because we don't synthesize an intersectional call signature when getting the members of a union type -- only call signatures which are identical appear on the unioned type.

あなたのケースでは、彼らそれぞれが固有の属性を持っているので、ChartInputとMultiChartInputは、互換性の署名を持っていません。すなわちChartInputはvalue: numberであり、MultiChartInputはseries: ChartInput[]である。これらの属性をコメントアウトし、エラーが消えるのを見てすぐにこれをテストできます（demo of experiment）。

型の安全性を維持しながら、エラーを解決(ChartInput | MultiChartInput)[]にchartInputの種類を変更するには：

class ChartLegendComponent implements OnInit { 
    public chartInput: (ChartInput | MultiChartInput)[]; 
    ... 
} 

demo of fix 1

...またはthis.chartInputをキャスト：

(this.chartInput as (ChartInput | MultiChartInput)[]) 
    .forEach(
     (item, index) => { 
      this.legends.set(item.name, this.legendColors.domain[index]); 
     }); 
    } 

demo of fix 2