Skip to content

Union type is not compatible to second union type, even with full overlap. #30170

Closed
@noblica

Description

@noblica

TypeScript Version: 3.3.3

Search Terms:
Union types overlapping

Code

interface Blue {
    color: 'blue'
}
interface Yellow {
    color?: 'yellow',
}
function draw(val: Blue | Yellow) { }

function drawWithColor(currentColor: 'blue' | 'yellow' | undefined) {
    // The following line throws the type error: Type '"blue"' is not assignable to type '"yellow"'.
    return draw({ color: currentColor });
}

Expected behavior:
No type errors exist, because there is an interface which would accept 'blue'.

Actual behavior:
An error is thrown:

Argument of type '{ color: "blue" | "yellow"; }' is not assignable to parameter of type 'Blue | Yellow'.
  Type '{ color: "blue" | "yellow"; }' is not assignable to type 'Yellow'.
    Types of property 'color' are incompatible.
      Type '"blue" | "yellow"' is not assignable to type '"yellow"'.
        Type '"blue"' is not assignable to type '"yellow"'.

Playground Link:
Link to the playground example

Metadata

Metadata

Assignees

No one assigned

    Labels

    DuplicateAn existing issue was already created

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions