TypeScript Compiler: How to avoid compiler error when using Generics

Question

The following interface is used to define a JSON API response.
The status field tells whether the request was successful or not.
The data filed is used to set data(only if available) returned by the server upon successful requests.
Similarly the message field is used to set error messages upon failed requests.

export interface IResponse<T> {
    status: 'success' | 'fail';
    data?: T;
    message?: string;
}

Suppose I have the following function that fetches some company data from the server.
The response contains either data or string.

search(keyword: string): Observable<IResponse<ICompany[]|string>> {
   return this.searchCompany(keyword);
}

When I try to call this function as follows, I get a compile error as data could either be ICompany[] or string.

this.dataImportService.search('')
      .subscribe(
        data => {
         data.data[0].company_name // compile error 
      }, err => {
      });

What should I do to get rid of this compile error?

@BunyaminCoskuner sorry, missed that ".data" part. I am getting the compiler error with data.data[0].xxx — d-_-b
– d-_-b, Commented Dec 20, 2017 at 12:43

Romain Deneau · Accepted Answer · 2017-12-27 14:57:01Z

1

TypeScript compiler has some trouble working with nested property like data.data. The trick is to use a temporary variable const data = data.data. Then the TypeScript compiler behaves as expected: the typeof data === ... type guard is working i.e. the union type ICompany[] | string can be narrowed to ICompany[] or string inside the if (typeof data === ...) block.

Renaming data to response (to be less confusing), we have:

this.dataImportService.search('').subscribe(response => {
    const data = response.data; // inferred type: ICompany[]|string
    if (typeof data !== 'string' && data.length) {
        const firstCompany = data[0]; // inferred type: ICompany
        firstCompany.company_name; // OK
    }
});

Live in the TypeScript Playground

edited Dec 27, 2017 at 14:57

answered Dec 20, 2017 at 13:14

Romain Deneau

3,08116 silver badges26 bronze badges

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

Comments

Pierre Mallet · Accepted Answer · 2017-12-20 12:48:37Z

1

If you want to get rid of the compile error you could use <any> to avoid type checking.

this.dataImportService.search('')
      .subscribe(
        (data: any) => { // <- here
         data.data[0].company_name // compile error 
      }, err => {
});

But really you should not do that. Typescript is just warning you that if your search method returns a string you will have an error or at least unexpected behavior.

Say search return 'hoho or whatever', data.data will be 'hoho or whatever' data.data[0] = 'h'; data.data[0].company_name will be undefined.

answered Dec 20, 2017 at 12:48

Pierre Mallet

7,2412 gold badges22 silver badges31 bronze badges

Collectives™ on Stack Overflow

TypeScript Compiler: How to avoid compiler error when using Generics

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related