TS Type is missing the following properties

Question

I'm using Angular 7.x.x with TS in version 3.2.4.

I have two TS interfaces. One ist extending the other one:

This is the main interface:

export interface Result {
      var1: string;
      var2: number;
      var3: boolean;
} 

The second one just adds a property:

export interface ResultPlus extends Result {
      var4: boolean;
}

Now I have a service returning Observable<Result[]>.

In my component I subscribe on this service:

dataArray: ResultPlus[] = [];    

getResults(): void {
      this.service.getResults()
          .subscribe(data => {
            **this.dataArray** = (data as unknown as ResultPlus);
          });
     }

(There are no * in the code)

Now the this.dataArray (bold above - **) is underlined in red and it says:

error TS2740: Type 'ResultPlus' is missing the following properties from type 'ResultPlus[]': length, pop, push, concat, and 26 more.

What am I doing wrong?

Thank you in advance!

Answer 1

Try changing your cast to ResultPlus[] (the array type) not the single instance:

**this.dataArray** = (data as unknown as ResultPlus[]);

ie, you've declared dataArray to be an array of ResultPlus type.

If you're trying to add to this.dataArray for each item data, then you need to push to it - something like:

this.dataArray.push(data as unknown as ResultPlus);