Union types discriminate cases within an array

Question

Union types discriminate cases within an array

Creating a union type from a string array:

const categories = [
  'Category A',
  'Category B'
] as const

type myCategory = typeof categories[number]

myCategory is now 'Category A' | 'Category B'

Now, the goal is to create a discriminated union:

type categoryA = {
  type: 'Category A'
  // more properties
}

type categoryB = {
  type: 'Category B'
  // more properties
}

type selectedCategory = categoryA | categoryB

The aim here is to restrict the usage of cases in myCategory for the discriminated union - is this achievable?

Update: Ensuring that the cases in selectedCategory align with the values in categories. Currently, assigning any arbitrary string value to type of categoryA or categoryB is possible

Avoiding the use of interfaces or classes.

This is being done to enable data validation and validate oneOf<myCategory> (pseudo code) for selectedCategory.

typescript

Answer 1

Answer №1

It appears that the goal is to map over a union type to create a discriminated union, allowing for custom properties to be attached to each member of the union.

To achieve this, one can leverage distributive conditional types to distribute across the union type.

Here's an example:

const options = [
  'Option1',
  'Option2'
] as const

type myOption = typeof options[number]

type Distribute<U> = U extends any
  ? U extends "Option1"
    ? { option: U, prop1: number }
    : U extends "Option2"
      ? { option: U, prop2: boolean }
      : never
  : never


type Discriminated = Distribute<myOption>

This results in a union with the following structure

{
    option: "Option1";
    prop1: number;
} | {
    option: "Option2";
    prop2: boolean;
}

It is assumed that the additional properties of each union member should differ, otherwise a discriminated union may not be necessary. Keep in mind that when adding new members to myOption, they must be accounted for within the Distribute type.

Answer 2

It appears that the goal is to map over a union type to create a discriminated union, allowing for custom properties to be attached to each member of the union.

To achieve this, one can leverage distributive conditional types to distribute across the union type.

Here's an example:

const options = [
  'Option1',
  'Option2'
] as const

type myOption = typeof options[number]

type Distribute<U> = U extends any
  ? U extends "Option1"
    ? { option: U, prop1: number }
    : U extends "Option2"
      ? { option: U, prop2: boolean }
      : never
  : never


type Discriminated = Distribute<myOption>

This results in a union with the following structure

{
    option: "Option1";
    prop1: number;
} | {
    option: "Option2";
    prop2: boolean;
}

It is assumed that the additional properties of each union member should differ, otherwise a discriminated union may not be necessary. Keep in mind that when adding new members to myOption, they must be accounted for within the Distribute type.

Answer 3

Answer №2

When attempting to utilize the third type, an error arises; however, no error occurs when adding it to typeAorB. A similar issue is present in bugs' solution, albeit being more innovative than the description provided below. It would have been preferable if an error was triggered in that scenario.

To address this, I introduced a base type:

type baseTypeAorB = {
    type: myType;
}

This base type was then integrated into typeAorB:

type typeAorB = baseTypeAorB & (typeAAA | typeBBB)

Subsequently, despite there not being an error thrown, upon introducing typeCCC into the mix:

type typeCCC = {
  type: 'CCC'
  // additional properties
}

type typeAorB = baseTypeAorB & (typeAAA | typeBBB | typeCCC) // No error

It is worth noting that the resultant typeAorB does not include typeCCC; inspection in the playground reveals its composition as follows:

type typeAorB = (baseTypeAorB & typeAAA) | (baseTypeAorB & typeBBB)

baseTypeAorB effectively prevents the inclusion of typeCCC within the type. Consequently, any attempt to use it as if it contains typeCCC will result in an error:

let x: typeAorB = {
  type: "CCC" // An error will be displayed here 
}

View on Playground: Playground link

Answer 4

When attempting to utilize the third type, an error arises; however, no error occurs when adding it to typeAorB. A similar issue is present in bugs' solution, albeit being more innovative than the description provided below. It would have been preferable if an error was triggered in that scenario.

To address this, I introduced a base type:

type baseTypeAorB = {
    type: myType;
}

This base type was then integrated into typeAorB:

type typeAorB = baseTypeAorB & (typeAAA | typeBBB)

Subsequently, despite there not being an error thrown, upon introducing typeCCC into the mix:

type typeCCC = {
  type: 'CCC'
  // additional properties
}

type typeAorB = baseTypeAorB & (typeAAA | typeBBB | typeCCC) // No error

It is worth noting that the resultant typeAorB does not include typeCCC; inspection in the playground reveals its composition as follows:

type typeAorB = (baseTypeAorB & typeAAA) | (baseTypeAorB & typeBBB)

baseTypeAorB effectively prevents the inclusion of typeCCC within the type. Consequently, any attempt to use it as if it contains typeCCC will result in an error:

let x: typeAorB = {
  type: "CCC" // An error will be displayed here 
}

View on Playground: Playground link

Union types discriminate cases within an array

Answer №1

Answer №2

Similar questions

The name 'console' could not be located

Implementing TypeScript type definitions for decorator middleware strategies

Adding connected types to a list using Typescript

Integrating a non-nullable static type into memoized components leads to a lint error - refer to the example provided for

The MUI theme seems to be missing its application

Storing input values in the state using Typescript by default

Developing a search feature using Angular 6 with Observable subscription for the FrontEnd application

Two services declared with "providedIn: 'root'" that have identical names

Issue with Angular MatSelect Losing Selected Value in Reactive Form Upon Submission

The property "props" is not recognized within the context of type PropType

Is there a way to access URL parameters in the back-end using Node.js?

Issue encountered: Jest-dom is throwing a TypeError because $toString is not recognized as a function on a project using Typescript, React

How to replace/redirect the import statement in TypeScript from { X } to 'Y'

Having trouble entering text into a React input field

The initial update of the view does not occur when a component property changes in Angular 2 RC6

How can this be happening? It's expected that items will be printed, but for some reason

An issue arises in Slate.js when attempting to insert a new node within a specified region, triggering an error

The navigation function in Angular, this.router.navigate, is causing issues and

crafting connections in 3D using TypeORM (ORM)

What situations call for the use of 'import * as' in TypeScript?