The combination of types in a union allows for incorrect assignments of properties from the individual types involved

Question

The combination of types in a union allows for incorrect assignments of properties from the individual types involved

I'm struggling to grasp the concept of unions in TypeScript. Can someone explain why the following assignment is considered valid? I believed it would only be acceptable for const a = {a:12}, {a:123,b:23}, or {a:12,b:12,c:123}.

type abcd =
    | {
        a: number;
      }
    | {
        a: number;
        b: number;
      }
    | {
        a: number;
        b: number;
        c: number;
      };

const a: abcd = {
    a:123,
    c:234
};

Playground link

If I change c to somethingElse, the assignment is not permitted:

const a: abcd = {
    a:123,
    somethingElse:234 // Error on this line
};

An error message stating:

Type '{ a: number; somethingElse: number; }' is not assignable to type 'abcd'. Object literal may only specify known properties, and 'somethingElse' does not exist in type 'abcd'.(2322)

typescript

Answer 1

Answer №1

Summary

To clarify, unions do not guarantee mutual exclusivity. For a workaround on achieving mutual exclusion for types using Union type, never type, and optional property combination, refer to the Work around section in this response.

The functionality of Union type is more akin to an `OR` gate than an `XOR` gate. Essentially, if an object satisfies any of the types in your Union type, it is considered an instance of that Union type.

Consider the following example:

type abcd =
  | {
    a: number;
  }
  | {
    x: number;
    y: number;
  }
  | {
    p: number;
    q: number;
    r: number;
  }
  | {
    x: number;
    y: number;
  };

const APY: abcd = {
  a: 123,
  p: 234,
  y: 1,
};

In this case, as constant `APY` includes enough properties to fulfill the requirements of `{ a: number; }` type within the union, other properties defined in the Union type are allowed.

The limitation imposed by the Union type is that extra properties not within the Union are restricted, while the instance must satisfy one of the types within the union.

Solution

If Union type alone does not provide the desired outcome, combining it with never type can help achieve the intended result:

type abcd =
  | {
    a: number;
    b?: never;
    c?: never;
  }
  | {
    a: number;
    b: number;
    c?: never;
  }
  | {
    a: number;
    b: number;
    c: number;
  };

/*
  Type '{ a: number; c: number; }' is not assignable to type 'abcd'.
  Property 'b' is missing in type '{ a: number; c: number; }' but required in type '{ a: number; b: number; c: number; }'.
*/
const a: abcd = {
  a: 123,
  c: 234,
};

Answer 2

Summary

To clarify, unions do not guarantee mutual exclusivity. For a workaround on achieving mutual exclusion for types using Union type, never type, and optional property combination, refer to the Work around section in this response.

The functionality of Union type is more akin to an `OR` gate than an `XOR` gate. Essentially, if an object satisfies any of the types in your Union type, it is considered an instance of that Union type.

Consider the following example:

type abcd =
  | {
    a: number;
  }
  | {
    x: number;
    y: number;
  }
  | {
    p: number;
    q: number;
    r: number;
  }
  | {
    x: number;
    y: number;
  };

const APY: abcd = {
  a: 123,
  p: 234,
  y: 1,
};

In this case, as constant `APY` includes enough properties to fulfill the requirements of `{ a: number; }` type within the union, other properties defined in the Union type are allowed.

The limitation imposed by the Union type is that extra properties not within the Union are restricted, while the instance must satisfy one of the types within the union.

Solution

If Union type alone does not provide the desired outcome, combining it with never type can help achieve the intended result:

type abcd =
  | {
    a: number;
    b?: never;
    c?: never;
  }
  | {
    a: number;
    b: number;
    c?: never;
  }
  | {
    a: number;
    b: number;
    c: number;
  };

/*
  Type '{ a: number; c: number; }' is not assignable to type 'abcd'.
  Property 'b' is missing in type '{ a: number; c: number; }' but required in type '{ a: number; b: number; c: number; }'.
*/
const a: abcd = {
  a: 123,
  c: 234,
};

The combination of types in a union allows for incorrect assignments of properties from the individual types involved

Answer №1

Similar questions

Is there a method to retrieve and organize all routes and corresponding endpoints in a NestJS application?

The TypeScript compilation is missing Carousel.d.ts file. To resolve this issue, ensure that it is included in your tsconfig either through the 'files' or 'include' property

No pathways can be established within Core UI Angular

The TypeScript compiler generates a blank JavaScript file within the WebStorm IDE

What is the timing for the execution of top-level non-export code in TypeScript?

Tips for creating a mapped type in TypeScript that is based on an array

Using *ngFor to iterate through a nested collection in an Angular 2 application

Tips for Achieving Observable Synchronization

Oops! We encountered an error: Uncaught (in promise): [object Object]. Angular 5 version is

Tips for extracting data from an Angular object using the *ngFor directive

The changes made to the path property in tsconfig.json are not being registered

Encountering an issue while developing a Discord bot using TypeScript

`express-validator version 4 is not functioning as expected`

A Typescript interface designed for a higher-order function that returns another function

When 'Interval.after' is invoked within the library, Luxon throws an error message stating "Invalid Interval."

Webpack is struggling to locate core-js paths when running on Windows operating systems

trpc - Invoking a route from within its own code

Disregard the possibility of React Hook "React.useEffect" running multiple times during execution

Vue 3 Electron subcomponents and routes not displayed

Looking to retrieve HTML elements based on their inner text with queryselectors?