Select characteristics with designated attribute types

Is there a way to create a type that selects only properties from an object whose values match a specific type? For example:

type PickOfValue<T, V extends T[keyof T]> = {
    [P in keyof (key-picking magic?)]: T[P];
};

I am looking for a solution where I can choose keys (properties) of T that have values matching the type V (T[P] extends V is true). I haven't been able to figure this out on my own, so any assistance would be greatly appreciated.

Here is an example output:

PickOfValue<Response, () => Promise<any>>; // {json: () => Promise<any>, formData: () => Promise<FormData>, ...}
PickOfValue<{a: string | number, b: string, c: number, d: "", e: 0}, string | number>; // {a: string | number, b: string, c: number, d: "", e: 0}
typescript

Answer №1

If I were to approach this, my implementation would look something like the following:

type KeysMatchingValue<T, V extends T[keyof T]> = 
  { [Key in keyof T]-?: T[Key] extends V ? Key : never }[keyof T];

type SelectionByValue<T, V extends T[keyof T]> = Pick<T, KeysMatchingValue<T, V>>

The function KeysMatchingValue utilizes mapped and conditional types to extract the necessary keys from the object.

When applied to your specific case, it produces the following outcome:

type Sample = SelectionByValue<Response, () => Promise<any>>; 
// type Sample = {
//  arrayBuffer: () => Promise<ArrayBuffer>;
//  blob: () => Promise<Blob>;
//  formData: () => Promise<FormData>;
//  json: () => Promise<any>;
//  text: () => Promise<string>;
// }

If this aligns with what you had in mind, then it should fulfill your requirements. Best of luck with your endeavor!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Continue iterating using (forEach, map,...) until the object (children) has no more elements

I need to disable the active status for all elements within my object structure. Here is an example of my object: const obj = { name: 'obj1' , ative: true , children: [ { name: 'obj2' , ative: true , children: ...

javascripttypescriptjavascript-objects

The filtering feature in the Row Group table of PrimeNG controls is malfunctioning and causing issues with the Dropdown

Within my Angular project, I have integrated PrimeNG controls version 11.4.4. Utilizing the Table control, I've structured tabular data to display rows in a grouped fashion with collapsible functionality. I've recently introduced a textbox and d ...

angulartypescriptprimengprimeng-datatable

Tips for configuring TypeScript in a monorepo to successfully compile private packages

I have configured a monorepo using turborepo that includes Nestjs for the backend and Nextjs for the frontend. To reuse prisma definitions, I separated them into their own package with its own tsconfig. In the index file of my database package where prism ...

reactjstypescriptnext.jsnestjsturborepo

The p-calendar feature is experiencing compatibility issues with Internet Explorer, Edge, and Firefox

While I've had success using primeng p-calendar on Google Chrome, I've encountered an issue where the date-picker does not open upon clicking the text box on other browsers. Below is the snippet of HTML code I utilized: <p-calendar [(ngModel ...

angulartypescriptprimeng

Tips on Resolving TypeError: Unable to Access Undefined PropertyAre you encountering a

I'm currently facing an issue while writing unit test cases using Jest in my Angular project. Whenever I attempt to run my test file, the following errors occur: TypeError: Cannot read property 'features' of undefined TypeError: Cannot read ...

angulartypescriptunit-testingtestingjestjs

AngularJS Dilemma: Virtual Machine Data Set but No Rendering in Sight

Below is the AngularJS controller code written in Typescript: /// <reference path='../../definitions.d.ts' /> module baseApp.viewControls.products { export interface IProductsScope extends IAppScope { vm: { product ...

angularjstypescript

Mapping intricate entities to intricate DTOs using NestJS and TypeORM

Currently, I am using the class-transformer's plainToClass(entity, DTO) function to transform entities into DTO objects. In addition, I have implemented the transform.interceptor pattern as outlined in this source. I make use of @Expose() on propert ...

node.jstypescriptnestjstypeormclass-transformer

Flag is activated to retrieve the data from the @Input source

@Input() config= []; flag = false; I need to change the flag to true only when I receive data in the config from the @input. Where should I do this? The data in the config is delayed and I am unable to access it in ngOnInit but can get it in ngOnChanges. ...

javascriptangulartypescript

Angular Http Promise is not returning the expected value

Struggling to update my component property with an HTTP result, but encountering issues. Thank you for your assistance! (currently using a static mock object) Class - Object export class Gallery { name: string; } Service import { Injectable } from ...

angularhttptypescriptundefined

Error encountered during Typescript compilation: Type 'void' cannot be assigned to type 'Item[]'

Below are my typescript functions. When I edit in vscode, the second function does not show any error message. However, upon compilation, an error is displayed for the second function: error TS2322: Type 'Promise<void>' is not assignable t ...

typescriptvisual-studio-codeq

What is the best way to create unit tests for a React component using TypeScript?

I recently completed a small React project using TypeScript and decided to have it print numbers of li tags in the browser. During this process, I wanted to write unit tests that would test if the component created the HTML element . However, as someone ...

reactjstypescriptjestjsreact-testing-library

How about utilizing React's conditional rendering feature?

I'm currently working on a component that displays tournaments and matches, and I'm facing a challenge in implementing a filter option for users to select tournaments by 'league', while still displaying all tournaments if no 'leagu ...

reactjstypescriptnext.js

How can I specify a subset within an Angular FormGroup?

Let's consider a scenario: I have two forms, form1 and form2, each containing multiple FormControls. The common property among them is the FormControl with an id. Now, I need to pass these forms as arguments to a method that should only require know ...

angulartypescript

Error: It is not possible to assign a value to the Request property of the Object since it only has a getter method

Encountering issues while attempting to deploy my Typescript Next.js application on Vercel. The build process fails despite functioning correctly and building without errors locally. Uncertain about the root cause of the error or how to resolve it. The f ...

javascriptnode.jstypescriptnext.jsvercel

Exploring the concept of union return types in TypeScript

Hello, I am facing an issue while trying to incorporate TypeScript in a way that may not be its intended use. I have created a custom hook called useGet in React which can return one of the following types: type Response<T> = [T, false, false] | [nul ...

javascriptreactjstypescriptreact-hooks

Angular 2 fails to redirect to a 404 page if both the route parameter and address are not valid

Currently, while working on my application with Angular 4.1.1, I have a habit of declaring routing in every module I create. For instance, in the file new-cars.routing.module.ts: import { NgModule } from '@angular/core'; import { RouterModule, ...

javascriptc#angulartypescriptasp.net-core

The Nuxt content Type 'ParsedContent | null' cannot be assigned to type 'Record<string, any> | undefined'

I've been experimenting with @nuxt/content but I'm struggling to create a functional demo using a basic example. ERROR(vue-tsc) Type 'ParsedContent | null' is not assignable to type 'Record<string, any> | undefined'. ...

typescriptnuxt3nuxt-content

Is your React conditional rendering malfunctioning due to state issues?

I am attempting to create a component that will only be displayed after clicking on a search button. Below is the current code that I have: Update After making some changes, I am now encountering this error: Error: ERROR in /home/holborn/Documents/Work ...

javascriptreactjstypescriptnext.js

Issue when retrieving child elements in Next.js server-side component

"use client"; -- Imports and interfaces const SubscriptionDataFetcher: React.FC<SubscriptionDataFetcherProps> = ({ children }) => { const [data, setData] = useState<SubscriptionData>({}); -- Functions return <> ...

reactjstypescriptnext.jstrpct3

Creating a TypeScript function that utilizes generics to automatically infer the return type

How can I create a function with a generic argument that can return any type, and have the return type inferred from its usage? I attempted the following code: type Thing<T> = <U>(value: T) => U const shouldMakeStrings: Thing<string> ...

typescripttypescript-generics