Discriminant-specific error message not shown when one constituent of a union has a union-typed discriminant

[yseymour]

TypeScript Version: 3.9.0-dev.20200319

Search Terms: discrimant tagged union assignable

Code

A simplified repro, based on real-world code:

interface A { x: number }
interface B { x: string }

interface U$A { kind: 'A', body: A }
interface U$B { kind: 'B', body: B }
interface U$null { kind: 'C' | 'D', body?: undefined }

type U = U$A | U$B | U$null;

declare function foo(u: U): void;

foo({kind: 'A', body: { x: 42 }});  // OK
foo({kind: 'B', body: { x: 42 }});  // Not OK

Expected behavior:
The second x: 42 gets a squiggle and and the error Type 'number' is not assignable to type 'string'.

Actual behavior:
The whole argument to the second foo call gets a squiggle and the error:

Argument of type '{ kind: "B"; body: { x: number; }; }' is not assignable to parameter of type 'U'. Type '{ kind: "B"; body: { x: number; }; }' is not assignable to type 'U$null'. Types of property 'kind' are incompatible. Type '"B"' is not assignable to type '"C" | "D"'.

I would expect the type of the argument to have been narrowed to U$B by checking the kind property first. As it stands, the developer UX is not ideal especially when the shapes of the types involved get larger and it gets quite hard to figure out which property is wrong (in my real-world case, the union has 250+ members and the error message is incomprehensible).

Notes:
If I change x to y in interface B, the error message comes up OK.
Also, if I comment out the two references to U$null, I get a different (but also acceptable) error.

Playground Link:
https://www.typescriptlang.org/v2/en/play?ts=next#code/JYOwLgpgTgZghgYwgAgILIN7IB4C5kgCuAtgEbTIC+AUKJLIigEKY74DOYUoA5ldbXDR4SZAFUAJOiwBrUABN8AclRKANMlIB7eQE986GnWGNxElrIXKm6zTv3IWRoQ1GSiAGw+s5IRciUAYSVkAB8AgBFbbT0AfnxCPwgYUAh5fmowXQAHFDFkAF4zdHDJFlKJTw8AbgF5CAQPOCgUGESEMGAtEGQYLS0ACkJ8MQBKfAA3LWB5Wuo+wYxffxVo+3wsPGQAFgAmKkpR2oWBpasAmw0Yh038PYOj6iA

Related Issues:
None that (at an uneducated guess) seemed to be exactly this one.

[RyanCavanaugh]

The logic to give a better error message depends on finding a concrete discriminant among the target type, and we don't consider unions to be a valid discriminant - in other words, U$null is what's tripping things up here and it'd be better if were written in its expanded form of two different types.

[yseymour]

@RyanCavanaugh Thanks for the suggestion of expanding U$null — I tried that, but it still seems that the discriminant doesn't get applied first:

Argument of type '{ kind: "B"; body: { x: number; }; }' is not assignable to parameter of type 'U'. Type '{ kind: "B"; body: { x: number; }; }' is not assignable to type 'U$D'. Types of property 'kind' are incompatible. Type '"B"' is not assignable to type '"D"'.

Playground Link

[jtbandes]

I ran into this using useAsyncFn from react-use:

Playground link

export declare type AsyncState<T> = {
    loading: boolean;
    error?: undefined;
    value?: undefined;
} | {
    loading: true;
    error?: Error | undefined;
    value?: T;
} | {
    loading: false;
    error: Error;
    value?: undefined;
} | {
    loading: false;
    error?: undefined;
    value: T;
};

function foo(x: AsyncState<readonly number[]>){
    let y: AsyncState<number[]> = x;
}

Error message:

Type 'AsyncState<readonly number[]>' is not assignable to type 'AsyncState<number[]>'.
  Type '{ loading: true; error?: Error | undefined; value?: readonly number[] | undefined; }' is not assignable to type 'AsyncState<number[]>'.
    Type '{ loading: true; error?: Error | undefined; value?: readonly number[] | undefined; }' is not assignable to type '{ loading: false; error?: undefined; value: number[]; }'.
      Types of property 'loading' are incompatible.
        Type 'true' is not assignable to type 'false'.

Expected error message: something like

    The type 'readonly number[]' is 'readonly' and cannot be assigned to the mutable type 'number[]'.