Using TypeScript to extract types from properties with specific types

Question

Using TypeScript to extract types from properties with specific types

My current challenge involves working with a filter object derived from an OpenAPI spec. The structure of this object is illustrated below:

export interface Filters {
  field1: string[]
  field2: string[]
  field3: boolean
  field4: number
}

My goal is to create a new type by selecting specific properties from the filters interface based on their types:

The desired outcome would be something similar to:

export type MultivalueFields = Select<Filters, string[]>
// Resulting type will be 'field1' or 'field2'

I'm curious if there is a built-in solution for this problem or how one could achieve this desired outcome?

typescript type-mapping

Answer 1

Answer №1

If you are looking to create a utility type, you can use the following code snippet:

type Values<T> = T[keyof T]
type Select<T, SelectType> = Values<{
  [Prop in keyof T]: T[Prop] extends SelectType ? Prop : never
}>

// An example usage: typeof A = 'field1'
type A = Select<{field1: string[], field2: string}, string[]>

Credit for this code goes to @captain-yossarian from Ukraine

Answer 2

If you are looking to create a utility type, you can use the following code snippet:

type Values<T> = T[keyof T]
type Select<T, SelectType> = Values<{
  [Prop in keyof T]: T[Prop] extends SelectType ? Prop : never
}>

// An example usage: typeof A = 'field1'
type A = Select<{field1: string[], field2: string}, string[]>

Credit for this code goes to @captain-yossarian from Ukraine

Answer 3

Answer №2

Multiple variations of this concept exist. The most up-to-date method involves using the as clause in mapped types:


type SelectOptions<T, SelectionType> = keyof {
  [Property in keyof T as T[Property] extends SelectionType ? Property : never]: any
}

// Resulting in 'field1'
type Result = SelectOptions<{field1: string[], field5: string}, string[]>

Playground Link

A similar approach can also be used to select properties based on a specific type:


type PickBySelectionType<T, SelectionType> = {
  [Property in keyof T as T[Property] extends SelectionType ? Property : never]: T[Property]
}

// Results in { field1: string[]; }
type Result = PickBySelectionType<{field1: string[], field5: string}, string[]>

Playground Link

Answer 4

Multiple variations of this concept exist. The most up-to-date method involves using the as clause in mapped types:


type SelectOptions<T, SelectionType> = keyof {
  [Property in keyof T as T[Property] extends SelectionType ? Property : never]: any
}

// Resulting in 'field1'
type Result = SelectOptions<{field1: string[], field5: string}, string[]>

Playground Link

A similar approach can also be used to select properties based on a specific type:


type PickBySelectionType<T, SelectionType> = {
  [Property in keyof T as T[Property] extends SelectionType ? Property : never]: T[Property]
}

// Results in { field1: string[]; }
type Result = PickBySelectionType<{field1: string[], field5: string}, string[]>

Playground Link

Using TypeScript to extract types from properties with specific types

Answer №1

Answer №2

Similar questions

I'm encountering an issue with one of my routes not loading correctly in Angular 4 Universal

The argument labeled as 'shop' does not fit the criteria for the parameter 'items' or 'cart'

Tips for transferring state information from a client to a server component within Nextjs?

Tips on Importing a Javascript Module from an external javascript file into an <script> tag within an HTML file

Is there a way to utilize an Event Emitter to invoke a function that produces a result, and pause until the answer is provided before continuing?

Is it possible to interchange the positions of two components in a routing system?

Issue with subscribing to a shared service in Angular 2

Access the Ionic2 App through the Slider option

Updating the React State is dependent on the presence of a useless state variable in addition to the necessary state variable being set

The correlation between methods in programming languages

The Angular7 counterpart of the C# attribute decorator

The name is not found when using attribute, but it is found when using extends

What is the best way to output data to the console from an observable subscription?

What are the steps for designing personalized syncfusion grid-columns while still preserving the built-in search functionality of syncfusion?

The switchMap function is sending back a single item

Troubleshooting: Issue with Dependency Injection functionality in Angular 2 starter project

Incorporate service providers into models with Ionic3/Angular4

Experimenting with TypeScript Single File Component to test vue3's computed properties

Leveraging Angular 4 with Firebase to extract data from a database snapshot

Error in typography - createStyles - 'Style<Theme, StyleProps, "root"