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

The React Quill interface is unable to load due to an undefined window

The pivotal Angular universal service

Leveraging the `--max-http-header-size` flag with ts-node

Encountering a type error with gatsby-plugin-dark-mode in a Typescript Gatsby setup

Can you explain the significance of the | symbol in TypeScript?

The system is unable to locate a supporting entity with the identifier '[object Object]', as it is classified as an 'object'

Angular - Enhancing the page with valuable information

Assigning values to objects based on the types of their properties in Typescript

When there is data present in tsconfig.json, Visual Studio Code does not display errors inline for TypeScript

What is the reason behind a tuple union requiring the argument `never` in the `.includes()` method?

Utilizing Typescript's compilerOptions.outDir for efficient compilation with external non-TS modules

Is it possible to declare language features in Typescript? For example, changing `!variable` to `no variable`

The object's type remains a mystery

Custom "set attribute" feature in TypeScript

A guide on incorporating a set of components to be utilized as custom HTML elements in Angular

The powerful combination of harp.gl and Angular NG

React - The `component` prop you have supplied to ButtonBase is not valid. Please ensure that the children prop is properly displayed within this customized component

When we mention TypeScript and CDK, we are actually talking about the very foundation

Error in TypeScript: Angular Jasmine - The argument given as type 'string' cannot be assigned to a parameter expecting type 'never'

Incorporate an external library