Typescript: extends converts type of the form A | B to A & B

Created on 27 Jan 2020  路  3Comments  路  Source: microsoft/TypeScript


TypeScript Version: 3.7.2


Search Terms: extends, type inference

Code
Key parts to look at in this code are the definition of funcA which specifies the type of the argument to be A | B, but since it is typed as Slowboy<Payload> it goes through an extends undefined check which changes the expected argument type of funcA from A | B to A & B.

type A = {
    isNew: true;
    extra: {
        name: string,
        age: number
    }
}

type B = {
    isNew: false;
}

type AorB = A | B

type Data<T> = {
    name: string;
    payload: T 
}

type SlowBoy<Payload> = Payload extends undefined ?
    (payload?: undefined) => Data<undefined> :
    (payload: Payload) => Data<Payload>;


const funcA: SlowBoy<AorB> = (payload: AorB) => ({
    name: "A",
    payload
})

funcA({ //Shows the expected type of argument to funcA as A & B
    isNew: true,
    extra: {
        name: 'ijxsid',
        age: 310
    }
})

Expected behavior:
I expect the extends keyword to check if the Payload type extends undefined and if its the second case in which the Payload doesn't extend undefined, the Payload type should remain as applied in the definition of funcA, that is A | B.

Actual behavior:
The Payload type applied in the definition of funcA gets modified by the extends type check from A | B to A & B.

Is this the expected behavior of extends? Cause I don't think the type checks done by extends undefined should stay after the check has already determined the type.

Playground Link: https://www.typescriptlang.org/play/?ssl=1&ssc=1&pln=37&pc=3#code/FAFwngDgpgBAgjAvDA3sGGYEsDOA5KAdwC4YQAnAVygG51MoAPCgQ1LU05gDsWBbKKRwUs3AOYAaelxgsxgnpT4AjKOWkwAvsG2hIsAEJJUG3ARIwAZiwA2OWjuB7o8APbkjyBAB8YBp+AuACIsICwAPAAqAHzGHJi8AkIi4nScECxgNq4sACakkTCOzrAAytmEBq5g4QAKmdl5scj1WTm5MEwgUNy5ODCUvVCWolAdAPwaABQZbXnjpIO5w6O5AJRIsSFh4Usr3GOxxNOzjfkwrWcbiFuhEZft0XROAMau3MJWgy9wpOWulWq4Tg7gMzRgMwa7VIII811iU3iGESCgARHBUVJ0lC8jo1k5LN84IjTPgiKQKNQsQxmOQ2CYZMj+AoAORYABWjBwWFyLOpMjkCgAzABGAAMGm0mjWQA

Hover over the funcA call and it shows the expected argument type to be A & B

Related Issues:

Most helpful comment

You need to stop the type argument from being distributed by wrapping it in a tuple:

type SlowBoy<Payload> = [Payload] extends [undefined] ?
    (payload?: undefined) => Data<undefined> :
    (payload: Payload) => Data<Payload>;

This works:
https://www.typescriptlang.org/play/#code/FAFwngDgpgBAgjAvDA3sGGYEsDOA5KAdwC4YQAnAVygG51MoAPCgQ1LU05gDsWBbKKRwUs3AOYAaelxgsxgnpT4AjKOWkwAvsG2hIsAEJJUG3ARIwAZiwA2OWjuB7o8APbkjyBAB8YBp+AuACIsICwAPAAqAHzGHJi8AkIi4nScECxgNq4sACakkTCOzrAAytmEBq5g4QAKmdl5scgA2vVZObkAujBMIFDcuTgwLZSDUJaiUN0wAPwaABQZHXmzpGO5E1O5AJRIsSFh4Rtb3NOxxIvLjfkw7Td7iAehEfed0XROAMau3MJWYy+cFI5VclWq4Tg7gMzRgSwanVIUI8j1iC3iGESCgARHBsVJ0gi8jodk5LIC4OjTPgiKQKNQCQxmOQ2CYZJj+AoAORYABWjBwWFyXMZMjkCgAzABGAAMGm0mlJwB+fxAAO4XwMIIqVRqJ0mZ1ysIWqLhKB4nNI2Msrlc+Jg10RMH12y0OxoQA

All 3 comments

This is working as intended, as per #29011. See the documentation for improved behavior for calling union types.

The type SlowBoy<AorB> is the union ((payload: A) => Data<A>) | ((payload: B) => Data<B>) because SlowBoy<> is a distributive conditional type so SlowBoy<A|B> is equivalent to SlowBoy<A> | SlowBoy<B>. And as of TS3.3, a union of functions can be called with an intersection of the parameters.

You need to stop the type argument from being distributed by wrapping it in a tuple:

type SlowBoy<Payload> = [Payload] extends [undefined] ?
    (payload?: undefined) => Data<undefined> :
    (payload: Payload) => Data<Payload>;

This works:
https://www.typescriptlang.org/play/#code/FAFwngDgpgBAgjAvDA3sGGYEsDOA5KAdwC4YQAnAVygG51MoAPCgQ1LU05gDsWBbKKRwUs3AOYAaelxgsxgnpT4AjKOWkwAvsG2hIsAEJJUG3ARIwAZiwA2OWjuB7o8APbkjyBAB8YBp+AuACIsICwAPAAqAHzGHJi8AkIi4nScECxgNq4sACakkTCOzrAAytmEBq5g4QAKmdl5scgA2vVZObkAujBMIFDcuTgwLZSDUJaiUN0wAPwaABQZHXmzpGO5E1O5AJRIsSFh4Rtb3NOxxIvLjfkw7Td7iAehEfed0XROAMau3MJWYy+cFI5VclWq4Tg7gMzRgSwanVIUI8j1iC3iGESCgARHBsVJ0gi8jodk5LIC4OjTPgiKQKNQCQxmOQ2CYZJj+AoAORYABWjBwWFyXMZMjkCgAzABGAAMGm0mlJwB+fxAAO4XwMIIqVRqJ0mZ1ysIWqLhKB4nNI2Msrlc+Jg10RMH12y0OxoQA

Thanks @AlCalzone, that saves it from converting from A | B to A & B. I will close the issue unless someone else wants to comment.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

RyanCavanaugh picture RyanCavanaugh  路  205Comments

rwyborn picture rwyborn  路  210Comments

metaweta picture metaweta  路  140Comments

chanon picture chanon  路  138Comments

Gaelan picture Gaelan  路  231Comments