Obtain a union type in TypeScript based on the values of a field within another union type

Question

Obtain a union type in TypeScript based on the values of a field within another union type

Is it feasible in Typescript to derive a union type from the values of a field within another union type?

type MyUnionType =
  | { foo: 'a', bar: 1 }
  | { foo: 'b', bar: 2 } 
  | { foo: 'c', bar: 3 }

// Is there an automatic way to achieve this? 
// Like creating a union of the possible values for foo in MyUnionType?
type Foos = 'a' | 'b' | 'c'

I had hoped Pick<MyUnionType, 'foo'> would work, but it doesn't quite deliver - it returns the desired type nested under a foo field: { foo: 'a' | 'b' | 'c' }

typescript

Answer 1

Answer №1

const Foos = MyUnionType['foo'] functions well when each type includes a foo field:

const MyUnionType = 
  | { foo: 'a', bar: 1 }
  | { foo: 'b', bar: 2 } 
  | { foo: 'c', bar: 3 }

const FooType = MyUnionType['foo']
// FooType = "a" | "b" | "c"

If you need to spread out over a diverse union type, you can narrow down to those types in the union with the field by doing this:

const SelectField<T, K extends string> = T extends Record<K, any> ? T[K] : never;

This allows you to utilize:

const MyUnionType = 
  | { foo: 'a', bar: 1 }
  | { foo: 'b', bar: 2 } 
  | { foo: 'c', bar: 3 }
  | { bar: 4 }

const FooType = MyUnionType['foo']
// Property 'foo' does not exist on type 'MyUnionType'. :-(

const FooType2 = PickField<MyUnionType, 'foo'>
// type FooType2 = "a" | "b" | "c"

const PickField<T, K extends string> = T extends Record<K, any> ? T[K] : never;
// Alternatively, you could return `undefined` instead of `never`
// in the false branch to capture the potentially missing data

Answer 2

const Foos = MyUnionType['foo'] functions well when each type includes a foo field:

const MyUnionType = 
  | { foo: 'a', bar: 1 }
  | { foo: 'b', bar: 2 } 
  | { foo: 'c', bar: 3 }

const FooType = MyUnionType['foo']
// FooType = "a" | "b" | "c"

If you need to spread out over a diverse union type, you can narrow down to those types in the union with the field by doing this:

const SelectField<T, K extends string> = T extends Record<K, any> ? T[K] : never;

This allows you to utilize:

const MyUnionType = 
  | { foo: 'a', bar: 1 }
  | { foo: 'b', bar: 2 } 
  | { foo: 'c', bar: 3 }
  | { bar: 4 }

const FooType = MyUnionType['foo']
// Property 'foo' does not exist on type 'MyUnionType'. :-(

const FooType2 = PickField<MyUnionType, 'foo'>
// type FooType2 = "a" | "b" | "c"

const PickField<T, K extends string> = T extends Record<K, any> ? T[K] : never;
// Alternatively, you could return `undefined` instead of `never`
// in the false branch to capture the potentially missing data

Answer 3

Answer №2

A fantastic example of code from Sean Vieira. Here's an alternative approach, a bit more detailed:

const ALL_ITEMS =[
   { item: 'apple', quantity: 1 },
   { item: 'banana', quantity: 2 },
   { item: 'cherry', quantity: 3 }] as const

const ALL_ITEMS_LIST = [...ALL_ITEMS.map(i => i.item)] as const;

type MyProductType = typeof ALL_ITEMS;
type ItemType = typeof ALL_ITEMS_LIST;
// ItemType = "apple" | "banana" | "cherry"

Answer 4

A fantastic example of code from Sean Vieira. Here's an alternative approach, a bit more detailed:

const ALL_ITEMS =[
   { item: 'apple', quantity: 1 },
   { item: 'banana', quantity: 2 },
   { item: 'cherry', quantity: 3 }] as const

const ALL_ITEMS_LIST = [...ALL_ITEMS.map(i => i.item)] as const;

type MyProductType = typeof ALL_ITEMS;
type ItemType = typeof ALL_ITEMS_LIST;
// ItemType = "apple" | "banana" | "cherry"

Answer 5

Answer №3

If you want to access an entire set of potential data, like that found in an object literal type, follow these steps:

type Combine<T> =
    (T extends any ? (x: T) => any : never) extends
    (x: infer R) => any ? R : never

type ValueIntersectionByIndexUnion<T, TKey extends keyof Combine<T> = keyof Combine<T>> = T extends Record<TKey, any> ? ({
    [P in TKey]: T extends Record<P, any> ? (k: T[P]) => void : never
}[TKey] extends ((k: infer I) => void) ? I : never) : never;

type Example = { [K in keyof Combine<TA1>]: ValueIntersectionByIndexUnion<TA1, K> };

Answer 6

If you want to access an entire set of potential data, like that found in an object literal type, follow these steps:

type Combine<T> =
    (T extends any ? (x: T) => any : never) extends
    (x: infer R) => any ? R : never

type ValueIntersectionByIndexUnion<T, TKey extends keyof Combine<T> = keyof Combine<T>> = T extends Record<TKey, any> ? ({
    [P in TKey]: T extends Record<P, any> ? (k: T[P]) => void : never
}[TKey] extends ((k: infer I) => void) ? I : never) : never;

type Example = { [K in keyof Combine<TA1>]: ValueIntersectionByIndexUnion<TA1, K> };

Obtain a union type in TypeScript based on the values of a field within another union type

Answer №1

Answer №2

Answer №3

Similar questions

How to Create a Dependency on Tabs for Selecting Items in an Angular 7 Materials Dropdown List

Can the return type of a function be utilized as one of its argument types?

The error message "result.subscribe is not a function" indicates that there was a problem

Encountering a challenge with triggering a dialog box from an onClick event on a pie chart in Angular 8 when utilizing chart.js

Adjusting the array when items in the multi-select dropdown are changed (selected or unselected)

Tips for managing the error message "The key 'myOptionalKey' is optional in the 'myObject' type but necessary in the '{...}' type"

React App Creation: Issue with ESLint configuration in TypeScript environment

What is the best way to showcase information in Angular?

The Type '{Property: string, Property2: string} does not match the type Observable<Filters[]>

Enhance your TypeScript React development with NeoVim

What techniques can be used to determine which exact key was matched by a generic?

Help needed: Encountered an error stating "Module not found: Error can't resolve 'child_process', any solutions to resolve this issue?

A step-by-step guide on effectively adopting the strategy design pattern

What is the best way to declare an array of objects within another array using typescript?

Using Material UI with React and TypeScript

Embed a dynamically generated SVG into an element in Angular without triggering any security warnings

The type of 'username' cannot be determined without specifying the reference to '@angular/forms/forms' in the node modules

The HTML button triggers a function to execute on a different webpage when clicked

What is the method for locating an element within an array?

How is it possible to leverage the CDN URL mechanism for package management when working with Typescript?