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

The validation process in Redux forms

What could be causing the TypeScript exhaustive switch check to malfunction?

Why does the Angular page not load on the first visit, but loads successfully on subsequent visits and opens without any issues?

In what manner can I retrieve this particular type?

Is React Typescript compatible with Internet Explorer 11?

Troubleshooting problem with sorting in Angular 4 material header

Using Phoenix Channels and Sockets in an Angular 2 application: A comprehensive guide

React with TypeScript - Troubleshooting TS Error when Iterating over List Item (LI) Elements

Integrating HTTP JSON responses into HTML using Ionic 2, Angular 2, TypeScript, and PHP: A comprehensive guide

Generate several invoices with just a single click using TypeScript

Exploring Angular 4's Capabilities: Navigating a Multi-Dimensional Array

What is the best way to organize information in a table based on the date

Is it possible to merge these two scripts into a single one within Vue?

Guide to forming an array by extracting specific properties from a nested JSON array using javascript

What is the method for including as: :json in your code?

Displaying svg files conditionally in a react native application

Tips for injecting a service into a class (not a component)

Using TypeScript, apply an event to every element within an array of elements through iteration

Establishing a default value as undefined for a numeric data type in Typescript

What is the process for building .ts components within a Vue application?