Narrowing typescript generic type based on discriminated unions

user_11299058 0
Viewed 106

I have some type definitions as shown below.

type PayloadType = 'A' | 'B';

interface Payload<T extends PayloadType> {
  type: T;
}

interface PayloadA extends Payload<'A'> {
  state: string
}

interface PayloadB extends Payload<'B'> {
  serialNumber: string;
}

type TPayload = PayloadA | PayloadB;


type PayloadInterpretation<T extends TPayload> = {
  payload: T;
  entries: T[]; // This property is only for demonstration purpose
};

type TPayloadInterpretation = PayloadInterpretation<PayloadA> | PayloadInterpretation<PayloadB>;

function f(interpretation: TPayloadInterpretation) {
  if (interpretation.payload.type === 'B') {
    const payload = interpretation.payload; // payload is of type PayloadB
    const entries = interpretation.entries; // entries is of type PayloadA[] | PayloadB[]
  }
}

The comments show that even the type of payload can be correctly narrowed down to PayloadB based on discriminated unions, but the type T[] for entries is still PayloadA[] | PayloadB[].

I was thinking if typescript knows the type T for payload is PayloadA, it should also be able to narrow entries: T[] to entries: PayloadB[]. I know I could do a type casting like:

function f(interpretation: TPayloadInterpretation) {
  if (interpretation.payload.type === 'B') {
    const payloadBInterpretation = interpretation as PayloadInterpretation<PayloadB>;
    ...
  }
}

But my question would be is there any other way to do this?

The code is here in typescript playground.

Thanks!

typescript-generics typescript javascript
1 Answers

When you check for interpretation.payload.type, you are only narrowing the interpretation.payload object. You are not actually doing anything to narrow interpretation.entries.

In other words, typescript doesn't know that interpretation.entries can also be narrowed when you narrow interpretation.payload.

If you want both of them to be narrowed, you need another discriminator in the PayloadInterpretation type:

// ...

type PayloadInterpretation<T extends TPayload> = {
  type: T['type']; // the new discriminator for the whole PayloadInterpretation
  payload: T;
  entries: T[];
};

// ...

function f(interpretation: TPayloadInterpretation) {
  if (interpretation.type === 'B') { // narrowing the whole interpretation instead of only interpretation.payload
    const payload = interpretation.payload; // payload is of type PayloadB
    const entries = interpretation.entries; // entries is of type PayloadB[]
  }
}
user_63016270
Related