Discover the Category of Union based on Discriminator

Question

Discover the Category of Union based on Discriminator

Imagine a scenario where there is a concept of a union type called Thing, which combines types Foo, Bar, and Baz, each identified by the property tag.

interface Foo {
  tag: 'Foo'
  foo: string
}

interface Bar {
  tag: 'Bar'
  bar: number
}

interface Baz {
  tag: 'Baz'
  baz: boolean
}

type Union = Foo | Bar | Baz

Now, the goal is to create a mapped type that iterates over the tags within the Union, associating each tag with its corresponding interface type. The main question at hand is: Can we access a type from a union based on its tag value?

interface Tagged {
  tag: string
}

type TypeToFunc<U extends Tagged> = {
  // Is it possible to retrieve the type for the given tag from the union type?
  // What should replace the ??? in this case?
  readonly [T in U['tag']]: (x: ???) => string
}

const typeToFunc: TypeToFunc<Union> = {
  // x must be of type Foo
  Foo: x => `FOO: ${x.foo}`,
  // x must be of type Bar
  Bar: x => `BAR: ${x.bar}`,
  // x must be of type Baz
  Baz: x => `BAZ: ${x.baz}`,
}

If this approach is not feasible, are there other methods to achieve such mapping between types?

typescript type-inference typescript-typings union-types

Answer 1

Answer №1

Before TypeScript v2.8, there was no direct way to programmatically handle unions. Building unions programmatically in TypeScript was more feasible than trying to inspect them manually. As a workaround, you could create an UnionSchema:

interface UnionSchema {
  Foo: {foo: string},
  Bar: {bar: number},
  Baz: {baz: boolean}
}

type Union<K extends keyof UnionSchema = keyof UnionSchema> = {
  [P in K]: UnionSchema[K] & {tag: K}
}[K]

With this setup, you can refer to individual union constituents as Union<'Foo'>, Union<'Bar'>, and Union<'Baz'>. You can assign names for convenience:

interface Foo extends Union<'Foo'> {}
interface Bar extends Union<'Bar'> {}
interface Baz extends Union<'Baz'> {}

This enables typing your function like so:

type TypeToFunc<U extends Union> = {
  readonly [T in U['tag']]: (x: Union<T>) => string
}
const typeToFunc: TypeToFunc<Union> = {
  // x must be of type Foo
  Foo: x => `FOO: ${x.foo}`,
  // x must be of type Bar
  Bar: x => `BAR: ${x.bar}`,
  // x must be of type Baz
  Baz: x => `BAZ: ${x.baz}`,
}

In TypeScript v2.8 onwards, the introduction of conditional types enhances the expressivity in handling unions. One way to define a union discriminator is by using:

type DiscriminateUnion<T, K extends keyof T, V extends T[K]> = 
  T extends Record<K, V> ? T : never

When combined with the original definitions:

interface Foo {
  tag: 'Foo'
  foo: string
}

interface Bar {
  tag: 'Bar'
  bar: number
}

interface Baz {
  tag: 'Baz'
  baz: boolean
}

type Union = Foo | Bar | Baz

You can now utilize:

type TypeToFunc<U extends Union> = {
  readonly [T in U['tag']]: (x: DiscriminateUnion<Union,'tag',T>) => string
}

This method also works effectively. To try it out immediately, install typescript@next from npm.

I hope this solution proves helpful for your coding endeavors. Best of luck!

Answer 2

Before TypeScript v2.8, there was no direct way to programmatically handle unions. Building unions programmatically in TypeScript was more feasible than trying to inspect them manually. As a workaround, you could create an UnionSchema:

interface UnionSchema {
  Foo: {foo: string},
  Bar: {bar: number},
  Baz: {baz: boolean}
}

type Union<K extends keyof UnionSchema = keyof UnionSchema> = {
  [P in K]: UnionSchema[K] & {tag: K}
}[K]

With this setup, you can refer to individual union constituents as Union<'Foo'>, Union<'Bar'>, and Union<'Baz'>. You can assign names for convenience:

interface Foo extends Union<'Foo'> {}
interface Bar extends Union<'Bar'> {}
interface Baz extends Union<'Baz'> {}

This enables typing your function like so:

type TypeToFunc<U extends Union> = {
  readonly [T in U['tag']]: (x: Union<T>) => string
}
const typeToFunc: TypeToFunc<Union> = {
  // x must be of type Foo
  Foo: x => `FOO: ${x.foo}`,
  // x must be of type Bar
  Bar: x => `BAR: ${x.bar}`,
  // x must be of type Baz
  Baz: x => `BAZ: ${x.baz}`,
}

In TypeScript v2.8 onwards, the introduction of conditional types enhances the expressivity in handling unions. One way to define a union discriminator is by using:

type DiscriminateUnion<T, K extends keyof T, V extends T[K]> = 
  T extends Record<K, V> ? T : never

When combined with the original definitions:

interface Foo {
  tag: 'Foo'
  foo: string
}

interface Bar {
  tag: 'Bar'
  bar: number
}

interface Baz {
  tag: 'Baz'
  baz: boolean
}

type Union = Foo | Bar | Baz

You can now utilize:

type TypeToFunc<U extends Union> = {
  readonly [T in U['tag']]: (x: DiscriminateUnion<Union,'tag',T>) => string
}

This method also works effectively. To try it out immediately, install typescript@next from npm.

I hope this solution proves helpful for your coding endeavors. Best of luck!

Discover the Category of Union based on Discriminator

Answer №1

Similar questions

Encountering an error in Angular 8 where attempting to access an element in ngOnInit results in "Cannot read property 'focus' of null"

What is the solution to fixing the error message "Cannot redeclare block-scoped variable 'ngDevMode' "?

What is the reason for the removal of HTML tags in the environment when converting Angular dependencies from es2015 to esm2015 during

Include a control within a form based on the Observable response

Cannot execute npm packages installed globally on Windows 10 machine

Issue with passing parameters to function when calling NodeJS Mocha

Guide on linking action observables to emit values in sync before emitting a final value

Validation issue with Reactive Forms not functioning as expected

Passing data through Angular2 router: a comprehensive guide

typescript error caused by NaN

What are some solutions to the "t provider not found" error?

Issue at 13th instance: TypeScript encountering a problem while retrieving data within an asynchronous component

What could be causing the "ERROR TypeError: Cannot read property 'length' of undefined" message to occur with a defined array in my code?

What is the best way to send an enum from a parent component to a child component in

What role does typescript play in this approach?

Utilize clipboard functionality in automated tests while using Selenium WebDriver in conjunction with JavaScript

Tips for utilizing the value of object1.property as a property for object2

Using the HTTP Post method to retrieve a file object: a step-by-step guide

Setting up Jest to run in WebStorm for a Vue project with TypeScript can be done through

'The signatures of each of these values are not compatible with one another.' This error occurs when using find() on a value that has two different array types