Is it possible to automatically generate a discriminated union for every interface within a given namespace?

Question

Is it possible to automatically generate a discriminated union for every interface within a given namespace?

Currently utilizing TypeScript version 2.5, but willing to switch to 2.6 if necessary.

In my code base, there exists a namespace containing a variety of interfaces:

export namespace Interfaces {
    export interface One {
        kind: "One"
    }

    export interface Two {
        kind: "Two"
    }

    export interface Three {
        kind: "Three"
    }
}

To consolidate these interfaces, I have created a discriminated union:

export type KnownInterfaces = Interfaces.One | Interfaces.Two | Interfaces.Three;

Is it feasible to generate this discriminated union dynamically instead of manually updating it whenever an interface is added?

For instance:

export type KnownInterfaces = createDynamicUnion(Interfaces);

typescript

Answer 1

Answer №1

To approach this problem from a different perspective, consider using a mapping type instead of a namespace:

export type Shapes = {
  Circle: { type: 'Circle' },
  Square: { type: 'Square' },
  Triangle: { type: 'Triangle' }
}
export type KnownShapes = Shapes[keyof Shapes]

You have the freedom to add any number of properties to Shapes, while keeping KnownShapes as the union of all types.

An issue arises when trying to access individual interfaces with dot notation: Shapes.Circle won't compile. However, you can use indexed-access notation or lookup types like this to achieve it - for example, Shapes['Circle']. This workaround may become tedious, so creating aliases with dot notation names could be helpful:

export namespace Shapes {
  export type Circle = Shapes['Circle']
  export type Square = Shapes['Square']
  export type Triangle = Shapes['Triangle']
}

Keep in mind that creating aliases may lead to duplication of code whenever a new interface is added, so consider naming only essential ones. Best of luck!

Answer 2

To approach this problem from a different perspective, consider using a mapping type instead of a namespace:

export type Shapes = {
  Circle: { type: 'Circle' },
  Square: { type: 'Square' },
  Triangle: { type: 'Triangle' }
}
export type KnownShapes = Shapes[keyof Shapes]

You have the freedom to add any number of properties to Shapes, while keeping KnownShapes as the union of all types.

An issue arises when trying to access individual interfaces with dot notation: Shapes.Circle won't compile. However, you can use indexed-access notation or lookup types like this to achieve it - for example, Shapes['Circle']. This workaround may become tedious, so creating aliases with dot notation names could be helpful:

export namespace Shapes {
  export type Circle = Shapes['Circle']
  export type Square = Shapes['Square']
  export type Triangle = Shapes['Triangle']
}

Keep in mind that creating aliases may lead to duplication of code whenever a new interface is added, so consider naming only essential ones. Best of luck!

Is it possible to automatically generate a discriminated union for every interface within a given namespace?

Answer №1

Similar questions

Disabling FormArray on-the-fly in Angular

What are some ways to detect TypeScript type errors in the data of a Vue component?

I am looking to extract only the alphanumeric string that represents the Id from a MongoDB query

A guide on creating a concatenation function using TypeScript

The TypeOrm many-to-one relationship with a multiple column join is giving an error: The column mentioned in the reference, <column name>, was not found in the entity <entity name>

Resolving NgModule Import Errors During Migration of Angular Project from Version 11 to 16

Error with Chakra UI and React Hook Form mismatched data types

When utilizing <number | null> or <number | undefined> within computed() or signals(), it may not function properly if the value is 0

Ways to retrieve root context within a Vue Composition API in Vue 3.0 + TypeScript

Create a hierarchical tree structure using a string separated by dots

Unlocking the potential of styled-components by enhancing props and distributing them to children components

A guide on selecting checkboxes using TypeScript by iterating through two arrays

Angular displays error ERR_UNKNOWN_URL_SCHEME when attempting to retrieve an image saved in a blob

Node.js/TypeScript implementation of the Repository design pattern where the ID is automatically assigned by the database

Experience Next.js 13 with Chakra UI where you can enjoy Dark Mode without the annoying White Screen Flash or FOUC (flash of unstyled content)

Placing gaps after every group of four digits

Displaying user input data in a separate component post form submission within Angular

The compiler detected an unanticipated keyword or identifier at line 1434. The function implementation is either absent or not placed directly after the declaration at line 239

Tips for implementing a delay in HTTP requests using RxJS 6.3.0

Using Typescript to Declare Function and React Component Types