Utilize keys from a specific category to generate a new type containing keys from a different category

I've defined an interface with different types:

interface MyInterface {
  Name1: { userId: string }
  Name2: { bookingId: string }
}

Below that, I have a type that takes an object of type

{ [key: keyof MyInterface]: boolean }
:

type TProperties<T extends Record<keyof MyInterface, boolean>> = {
    [P in keyof T]: P extends keyof MyInterface ? Pick<MyInterface, P> : never
}

However, when I try to use it like this:

TProperties<{ Name1: true }> // Error <large obj redacted> is not assignable to type 'Record<keyof MyInterface, boolean>'.

What am I doing wrong in the code above?

Answer №1

You set a constraint on T to be a

Record<keyof MyInterface, boolean>
, requiring that T must contain all keys from MyInterface and not just some of them. To allow for more flexibility, you can use the Partial type.

type TProperties<T extends Partial<Record<keyof MyInterface, boolean>>> = {
    [P in keyof T]: P extends keyof MyInterface ? Pick<MyInterface, P> : never
}

Playground

However, it is uncertain whether this type does exactly what you intend it to do. Perhaps you were seeking something along these lines instead?

type TProperties<T extends Partial<Record<keyof MyInterface, boolean>>> = {
    [P in keyof T]: MyInterface[P & keyof MyInterface]
}

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

Exploring the world of third-party APIs

I am currently working on fetching data from an external API and displaying it. In order to enhance flexibility, I am aiming to completely separate the API integration from my code and use custom-defined data structures instead. Here is a brief visual ov ...

What is the issue with this asynchronous function?

async getListOfFiles(){ if(this.service.wd == '') { await getBasic((this.service.wd)); } else { await getBasic(('/'+this.service.wd)); } this.files = await JSON.parse(localStorage.getItem('FILENAMES')); var ...

How do I add a new item to an object using Ionic 2?

example item: this.advData = { 'title': this.addAdvS2.value.title , 'breadcrumb': this.suggestData.breadcrumb, 'price': this.addAdvS2.value.price ...

Bring in the express app within my API controller

Currently, I'm utilizing the Microsoft/TypeScript-Node-Starter express template available at: https://github.com/Microsoft/TypeScript-Node-Starter Within my application, there exists an /app.ts file: import * as express from 'express'; imp ...

Creating a button that emerges from another button

Currently utilizing Angular 5, I am looking to add an additional button that will display upon clicking another button. I am considering using the ngIf directive, but I am uncertain about how to target the specific button that was clicked. Here is an exc ...

Exploring the Possibilities: Incorporating xlsx Files in Angular 5

Is there a way to read just the first three records from an xlsx file without causing the browser to crash? I need assistance with finding a solution that allows me to achieve this without storing all the data in memory during the parsing process. P.S: I ...

Guide for validating three forms with a single button click in Angular 6 using TypeScript (TS)

Currently, I am retrieving data from 3 separate forms and storing it in 3 different services/tables. I am now looking to validate the data from these 3 forms. In cases where a required field is left empty by the user, an error message should be displayed. ...

Sending various data from dialog box in Angular 8

I have implemented a Material Design dialog using Angular. The initial example had only one field connected to a single parameter in the parent view. I am now trying to create a more complex dialog that collects multiple parameters and sends them back to t ...

TypeScript setter failing to activate

Here is a snippet of code from a class called VibrationElement: export class VibrationElement { private _amplitude: number; get amplitude(): number { return this._amplitude; } set amplitude(amplitude: number) { console.lo ...

Modifying the NestJS Decorator string parameter upon library import: A step-by-step guide

I am working with a NestJs monorepo that contains several Apps (microservices) and Libs. One common Service class is used across all apps, so I decided to extract it into a separate lib. Initially, I thought this was a good idea. However, I soon realized ...

Troubleshooting a Typescript issue with "padStart" while attempting to add an object to an array

In my code, I define an object template with empty values for publishedDate, Url, and Title: let dataTemplate = { publishedDate: "", Url: "", Title: "", } dataTemplate.publishedDate = xml.chi ...

Tips for properly utilizing GeolocationPosition in TypeScript

Our goal is to utilize the Geolocation API to access the user's location. This particular code snippet appears to be functioning well: if (navigator.geolocation) { navigator.geolocation.getCurrentPosition((position: GeolocationPosition) => conso ...

The value returned by UseSelector is not defined

this code snippet is responsible for monitoring the state of a shopping cart that contains various bets placed by the user const { games } = useSelector((state: any) => state.cart) which is then passed to another component like this <AppRecentUserG ...

Lerna: The Ultimate Guide to Installing External Packages Across Multiple Projects

We utilize Lerna for managing our mono-repo projects, and I am seeking the most effective method to install an external package in my projects while ensuring they all use the same version. Here is my project structure (my-Main-A and my my-Main-B both depe ...

Version 4.0 of Electron-React-Boilerplate has encountered an error: The property 'electron' is not recognized on the type 'Window & typeof globalThis'. Perhaps you meant to use 'Electron' instead?

I encountered an error while attempting to call the IPCrenderer using the built-in context bridge. The error message reads as follows: Property 'electron' does not exist on type 'Window & typeof globalThis'. Did you mean 'Elect ...

Implementing MouseEvents in Typescript React without having to pass them down to child elements

Is it possible to use Mouse Events on a whole React Element without having to pass it to a child element? I have been passing my handleEvent function to several functional components and now I want to know if it can be done without causing a TypeScript err ...

Determine the type of input and output based on another argument

When working with a function that takes an object of either TypeA or TypeB, the first parameter is used to specify the type of the object and the returned type depends on this first parameter. The issue arises in TypeScript where the type of the object is ...

Issue with MUI DialogTitle Ignoring SCSS Customization

I've been attempting to integrate a Google font into the text found in a Material-UI DialogTitle component. Here's my setup in App.module.scss: @import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@1,600&display=sw ...

When an undefined value is passed in a WHERE condition, it is interpreted as a true or matching condition in TypeORM

After some testing, I came across an interesting quirk with typeorm. It turns out that if a property in the WHERE clause of a FIND query (such as find, findOne, findBy, etc) is undefined, it behaves as if it's true and returns records - returning the ...

Solid Start is having difficulty executing the Create Effect feature

The function getName is successfully retrieving the name of the person with id 1 from the database, but there seems to be an issue as this code is not logging anything to the console, not even the debug console.log("running"): import { Database } from &apo ...