TypeScript Error for multiple types [Observables]

Question

I have the following resolver class

export class UserResolverService implements Resolve<Observable<IUserAccount[] | IUserMoreInfo>>{

constructor(
  private userService: UserService,
  private router: Router
){}

resolve(route: ActivatedRouteSnapshot): Observable<IUserAccount[] | IUserMoreInfo> {
.......
.........
        return this.userService.getUserAccounts(.....).pipe(
            take(1),
            map((res) => {
                console.log('Data', res);
                const data = res.data;
                const moreInfo = res.moreInfo;
                return {data, moreInfo};
            })
.......
........

}

}

For the above TS complains with following error, but when I return back the data with res.data the error disappears.

Type '{ data: IUserAccount[]; moreInfo: IUserMoreInfo | undefined; }' is missing the following properties from type 'IUserAccount[]': length, pop, push, concat, and 26 more.ts(2322)

The function that makes the request

public getUserAccounts = (....): Observable<IUserAccounts> => {
    return this.http.get<IUserAccounts>(`${url}`);
};

My interface definitions are as following

export interface IUserAccounts {
    data: IUserAccount[];
    moreInfo?: IUserMoreInfo;
}

export interface IUserAccount{
   name: string
   ......
   .....
}

export interface IUserMoreInfo{
   alias: string
   .....
   ......
}

David Kidwell · Accepted Answer · 2021-06-18 00:21:38Z

2

Your function declaration says that you are expecting it to return an observable stream of either IUserAccount[] or IUserMoreInfo and you are returning an observable stream of a custom object with both types in it,

{ data: IUserAccount[]; moreInfo: IUserMoreInfo | undefined; }

So your return type does not match the function declaration. You either need to change your return type to be moreInfo OR data (not both), or you need to update your function signature.

answered Jun 18, 2021 at 0:21

David Kidwell

7201 gold badge7 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

RRP Over a year ago

what about the case where i need to return both

David Kidwell Over a year ago

Then you would need to change your function signature to return this, Observable<IUserAccount[] | IUserMoreInfo | {data: IUserAccount[]; moreInfo: IUserMoreInfo | undefined;}>

Collectives™ on Stack Overflow

TypeScript Error for multiple types [Observables]

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related