Typescript union of Array and Object types

Question

Typescript compiler keeps throwing error when I try to use union or multiple types / interfaces.

My requirement

From the server I receive an object as response in which one key ('errorMessages') has data type string[] and the other key ('data') can either be an object or an array. I wrote an interface for this which should look like below:

interface MyServerResponse {
    errorMessages: string[];
    data: {
        headers: string[];
        body: any[][];
    } | any[]>;
}

Received compiler error on trying to access 'headers'

Property 'headers' does not exist on type 'any[] | { headers: string[]; body: any[][]; }'

Isn't it possible to implement this using union just like for number | boolean, string | null, etc.?

Shouldn't the any[] be on body ? interface MyServerResponse { errorMessages: string[]; data: { headers: string[]; body: any[][]| any[]; } ; } — Titian Cernicova-Dragomir
– Titian Cernicova-Dragomir, Commented Jul 25, 2018 at 13:18
No, the body key within data is always any[][]. I want the union on data key (just as mentioned in the question). Updated the question for more clarity. — James Antony
– James Antony, Commented Jul 27, 2018 at 13:21

Motti · Accepted Answer · 2018-07-25 13:26:02Z

5

When you have a type union you can only access members that are common to all types. If you want to say it's one or the other you need a type guard to let the compiler know that it's of the right type:

// this type isn't needed but it makes the code more readable
type headersBody = { headers: string[]; body: any[][] }; 

function isHeadersBody(obj: headersBody | any[]): obj is headersBody {
    return !Array.isArray(obj);
    // or better yet
    // return Array.isArray(obj["headers"]) && Array.isArray(obj["body"]);    
}

let obj: headersBody | any[];

if (isHeadersBody(obj)) {
    console.log(obj.body.length);
}

answered Jul 25, 2018 at 13:26

Motti

116k56 gold badges195 silver badges277 bronze badges

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

Comments

DaveG · Accepted Answer · 2018-07-25 13:19:20Z

3

Typescript - Advanced Types says

If we have a value that has a union type, we can only access members that are common to all types in the union.

So you are getting the error because "headers" isn't common across the types in the union.

answered Jul 25, 2018 at 13:19

DaveG

4551 gold badge3 silver badges16 bronze badges

Comments

Baumi · Accepted Answer · 2018-08-02 09:33:01Z

3

To inform TypeScript which of interfaces you expect you can just cast variable in this specific function:

interface dataTypeResponse {
    headers: string[];
    body: any[][];
}

interface MyServerResponse {
    errorMessages: string[];
    data: dataTypeResponse | any[];
}

doTheMagic(d: MyServerResponse) {
   // access it like this:
   const headers = (<dataTypeResponse>d.data).headers;
}

answered Aug 2, 2018 at 9:33

Baumi

1,7671 gold badge18 silver badges32 bronze badges

Collectives™ on Stack Overflow

Typescript union of Array and Object types

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related