Unleashing the Potential of TypeScript Union Types

Question

Unleashing the Potential of TypeScript Union Types

My code consists of a union type called PromptOptions:

type PromptOptions =
  | BasePromptOptions
  | BooleanPromptOptions
  | StringPromptOptions

type BasePromptOptions = {
  kind: string | (() => string)
};

type BooleanPromptOptions = { kind: 'confirm' };

type StringPromptOptions = {
  kind: 'input' | 'invisible' | 'list' | 'password' | 'text';
};

What I am attempting to achieve:

I have an arbitrary type named Lookup = { kind: 'invisible' }, and my goal is to utilize

type ExtractedType<T> = Extract<PromptOptions, T>

so that the outcome becomes

ExtractedType<Lookup> = StringPromptOptions

.

This approach successfully works if I provide a type that matches a prompt option exactly (

ExtractedType<{ kind: 'confirm' }> = BooleanPromptOptions

), but when I try something like this:

ExtractedType<{ kind: 'invisible' }> = never

, whereas I expect it to be StringPromptOptions.

Evidently, what I have done so far is incorrect, and I aim to achieve something like

Extract<PromptOptions, T extends <PromptOptions['kind']>>

; however, I am uncertain how to proceed with this or whether it is even feasible.

Playground Link

typescript

Answer 1

Answer №1

It took me a good thirty minutes of experimenting, but it seems like achieving this is quite challenging.

Nevertheless, here is the best solution I could come up with:

type ExtractedType<T> = {
  [K in PromptOptions as T extends K 
    ? K[keyof K] extends infer U extends string 
      ? U
      : "0"
    : never
  ]: K
} extends infer U ? U[keyof U] : never

This code successfully passes the test cases provided below:

type T0 = ExtractedType<{ kind: 'confirm' }>;
//   ^? BasePromptOptions | BooleanPromptOptions


type T1 = ExtractedType<{ kind: 'invisible' }>;
//   ^? BasePromptOptions | BooleanPromptOptions


type T2 = ExtractedType<{ kind: string }>
//   ^? { kind: string | (() => string); }


type T3 = ExtractedType<{ kind: () => string}> 
//   ^? { kind: string | (() => string); }

Please note that T0 and T1 also include BasePromptOptions. This occurs because both 'invisible' and 'confirm' extend { kind: string }.

Furthermore, keep in mind that this solution may not work for more complex scenarios. Feel free to experiment by adding another type similar to BasePromptOptions, which only includes a string and a function as types.

Try it out on TypeScript Playground

In theory, there may be a solution by converting the union to a tuple using TuplifyUnion from here. However, it's advised against using this approach as it can potentially disrupt the type system and lead to unreliable results. Therefore, I have refrained from attempting it.

Answer 2

It took me a good thirty minutes of experimenting, but it seems like achieving this is quite challenging.

Nevertheless, here is the best solution I could come up with:

type ExtractedType<T> = {
  [K in PromptOptions as T extends K 
    ? K[keyof K] extends infer U extends string 
      ? U
      : "0"
    : never
  ]: K
} extends infer U ? U[keyof U] : never

This code successfully passes the test cases provided below:

type T0 = ExtractedType<{ kind: 'confirm' }>;
//   ^? BasePromptOptions | BooleanPromptOptions


type T1 = ExtractedType<{ kind: 'invisible' }>;
//   ^? BasePromptOptions | BooleanPromptOptions


type T2 = ExtractedType<{ kind: string }>
//   ^? { kind: string | (() => string); }


type T3 = ExtractedType<{ kind: () => string}> 
//   ^? { kind: string | (() => string); }

Please note that T0 and T1 also include BasePromptOptions. This occurs because both 'invisible' and 'confirm' extend { kind: string }.

Furthermore, keep in mind that this solution may not work for more complex scenarios. Feel free to experiment by adding another type similar to BasePromptOptions, which only includes a string and a function as types.

Try it out on TypeScript Playground

In theory, there may be a solution by converting the union to a tuple using TuplifyUnion from here. However, it's advised against using this approach as it can potentially disrupt the type system and lead to unreliable results. Therefore, I have refrained from attempting it.

Answer 3

Answer №2

Upon realization that the PromptOptions was a discriminating union with the kind field, I successfully solved this issue.

I then utilized the DiscriminateUnion type from this helpful answer to extract the correct type from PromptOptions:

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

type IsBooleanPromptOptions = Extract<DiscriminateUnion<PromptOptions, 'kind', 'confirm'>, { kind: string }>;

type IsStringPromptOptions = Extract<DiscriminateUnion<PromptOptions, 'kind', 'list'>, { kind: string }>;

Playground

Answer 4

Upon realization that the PromptOptions was a discriminating union with the kind field, I successfully solved this issue.

I then utilized the DiscriminateUnion type from this helpful answer to extract the correct type from PromptOptions:

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

type IsBooleanPromptOptions = Extract<DiscriminateUnion<PromptOptions, 'kind', 'confirm'>, { kind: string }>;

type IsStringPromptOptions = Extract<DiscriminateUnion<PromptOptions, 'kind', 'list'>, { kind: string }>;

Playground

Unleashing the Potential of TypeScript Union Types

Answer №1

Answer №2

Similar questions

I'm currently endeavoring to integrate SignalR into my Vue project and encountering an issue

The best practices for utilizing ES6 Modules syntax in TypeScript files within a NextJS environment

Transforming classes into functional components with ApexCharts

What is the reason behind being able to assign unidentified properties to a literal object in TypeScript?

Create a TypeScript declaration file for a JavaScript dependency that contains an exported function

What function is missing from the equation?

Steer clear of utilizing the "any" type in your Express.js application built with

The type inference in TypeScript sometimes struggles to accurately determine the type of an iterable

Changing the color of a Chart.js chart in Angular: A step-by-step guide

Creating a union type from an array that is not a literal (using `Object.keys` and `Array.map`)

What is the best approach for retrieving an image efficiently with Angular HttpClient?

Utilizing TypeScript namespaced classes as external modules in Node.js: A step-by-step guide

Navigate to the parent element in the DOM

Invoke cloud functions independently of waiting for a response

Distinguishing Literal and Parameterized Routes in Angular 6

Best practice for encapsulating property expressions in Angular templates

What is the best way to organize my NPM package with separate directories for types and functions?

What is the process for retrieving an element from component interaction?

Having difficulty in accessing the node modules

Displaying hidden Divs in React Typescript that are currently not visible