TypeScript error when using discriminated union type

Question

I'm trying to use discriminated union type in TypeScript but I'm getting the following error:

Type '{ data: Aaaa | Bbbb; type: "aaaa" | "bbbb"; }' is not assignable to type 'EventData'.
  Type '{ data: Aaaa | Bbbb; type: "aaaa" | "bbbb"; }' is not assignable to type '{ type: "bbbb"; data: Bbbb; }'.
    Types of property 'type' are incompatible.
      Type '"aaaa" | "bbbb"' is not assignable to type '"bbbb"'.
        Type '"aaaa"' is not assignable to type '"bbbb"'.

With the following code:

export type Aaaa = {
    aPropForA: string
}

export type Bbbb = {
    somePropsB: number
}

export type EventData =
  | { type: 'aaaa'; data: Aaaa }
  | { type: 'bbbb'; data: Bbbb }

// simulate getting the data for brevity
declare const data: EventData['data'];
declare const type: EventData['type'];

export const getEventData = (): EventData => {
  return { // why is there an error?
    data,
    type,
  }
}

live

What's the source of the problem? How can I fix it without typecasting?

Titian Cernicova-Dragomir · Accepted Answer · 2019-07-08 18:32:38Z

2

The reason this is an error is that nothing guarantees that the combination of data and type is correct. In this code, the assignments are valid, and would lead to an incorrect union:

const data: EventData['data'] = { aPropForA: ""};
const type: EventData['type'] = "bbbb"

export const getEventData = (): EventData => {
  return { // why is there an error?
    data,
    type,
  }
}

The only way to get around the error without type assertions is to make the required checks:

declare const data: EventData['data'];
declare const type: EventData['type'];

export const getEventData = (): EventData => {
  if(type === 'aaaa' && 'aPropForA' in data) {
    return { data, type,}
  } else if(type === 'bbbb' && 'somePropsB' in data) { 
    return { data, type,}
  }
  throw new Error("Invalid combination")
}

answered Jul 8, 2019 at 18:32

Titian Cernicova-Dragomir

253k37 gold badges464 silver badges394 bronze badges

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

1 Comment

Michał Miszczyszyn Over a year ago

It… actually makes sense :) Thanks!

Collectives™ on Stack Overflow

TypeScript error when using discriminated union type

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related