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 (ChartInput | MultiChartInput)[]의 유형 변경, 형태의 안전성을 유지하면서 오류를 해결하려면 :

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

을