A new interface property type that is customized based on the type property that is passed in

My dilemma lies in a generic interface with a field depending on the passed type.

I'm exploring the possibility of having another field that can accept any type from the passed type.

For instance:

interface sampleObject {
   name: fullName
   age: number
   address: string
}

interface fullName{
   first: string
   middle: string
   last: string
}

// Consider I pass in a type like sampleObject

interface genericType<T, Key = keyof T> {
  field: Key // valid values are "name", "age", "address"
  fieldTypes: ??? // I aim for the valid types to be fullName, number, string
}

I attempted using fieldTypes: T[keyof T] but it returns

fullName | number | string | undefined
, triggering a ts(2322) error.

I'm uncertain if my approach is correct or not.

Answer №1

Perhaps a solution along these lines could prove beneficial:

declare type KeyValuePair<T, K extends keyof T = keyof T> = 
    K extends keyof T
        ? { key: K, value: T[K] }
        : never;
        
declare type GenericType<T> = KeyValuePair<T>;

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

Angular Karma Error - MatDialogRef Provider Not Found

While testing with Angular Karma, I encountered the following error... NullInjectorError: StaticInjectorError(DynamicTestModule)[ManageProblemsComponent -> MatDialogRef]: StaticInjectorError(Platform: core)[ManageProblemsComponent -> MatDialogRef]: ...

Issue with Angular2: The [routerLinkActive] directive does not update when using _router.navigate

My app includes several routerLinks that I have styled using [routerLinkActive]="['active']". Everything works perfectly when I click on one of the routerLinks to navigate. However, when I try to navigate using: this._router.navigate( [ thisUrl ...

Troubleshooting Paths with Angular's NgFor Directive

Within my Angular project, I have implemented a basic ngFor loop to display logo images. Here is a snippet of the code: <div *ngFor="let item of list" class="logo-wrapper"> <div class="customer-logo"> & ...

Determine the route path during the ongoing navigation event in Angular 8 using NavigationStart

Looking for a way to retrieve the router path during a NavigationStart event in Angular 8 this.router.events .pipe(filter(event => event instanceof NavigationStart)) .subscribe((event: NavigationStart) => { // need help gett ...

Encountering an issue with MUI Props: "Must provide 4 to 5 type arguments."

I'm attempting to use a custom component and pass in AutocompleteProps as a prop, all while utilizing typescript. Here's my current setup: type Props = { autoCompleteProps?: AutocompleteProps<T> label: string loading?: boolean } cons ...

"Error message: Trying to import a component in Angular, but encountering a message stating that the component has no exported

When creating a component named headerComponent and importing it into app.component.ts, an error is encountered stating that 'website/src/app/header/app.headerComponent' has no exported member 'headerComponent'. The code for app.headerC ...

Error message shows explicit Typescript type instead of using generic type name

I am looking to use a more explicit name such as userId instead of the type number in my error message for error types. export const primaryKey: PrimaryKey = `CONSUMPTION#123a4`; // The error 'Type ""CONSUMPTION#123a4"" is not assignable to ...

Tips for sending props, state, or arguments to a TypeScript React component

Hey there, total newbie here... I'm currently working on a school project and I've hit a bit of a roadblock... I'm attempting to pass some props from one component to another, but for some reason, it's not working properly. The goal ...

Utilize Ant Design TreeSelect to seamlessly integrate API data into its title and value parameters

I am currently working on populating a Tree Select component in ANT Design with data fetched from an API. The response from the API follows this structure: projectData = ProjectData[]; export type ProjectData = { key?: number; projectId: number; ...

Understanding React and TypeScript Higher Order Components: How to Resolve the Type '{}' is not assignable to Type P Error

While following along with the Learning React with TypeScript book, I encountered a problem where I hit a wall while coding. Despite surrendering and copying code directly from the book, the compiler is still unhappy As a temporary solution, I have resort ...

Why bother with creating mappers to transform entity-to-DTOs?

There are classes referred to as 'mappers' that are utilized by some individuals for converting DTOs to entities or vice versa. What benefits do I stand to gain from employing this technique during backend development? I am keen on delving deepe ...

What is the best method to trigger a bootstrap modal window from a separate component in Angular 8?

I have successfully implemented a bootstrap modal window that opens on a button click. However, I am now facing difficulty in opening the same modal window from a different component. Below is the code I have tried: <section> <button type=&quo ...

What causes the app to crash in release mode when importing a TypeScript component, while no issues arise in debugging?

Having an issue with importing a bottom sheet written in typescript into a class component. It works correctly in debugging mode but unfortunately not in release mode. Despite checking the logcat, no readable error code or message is being printed. Even a ...

Using the prop callback in a React test renderer does not trigger updates in hooks

I am currently exploring ways to effectively test a React function component that utilizes hooks for state management. The issue I am encountering revolves around the onChange prop function not properly updating the state value of my useState hook. This in ...

Angular Component - Array missing initial value in @Input property

Having trouble transferring values between components? I'm currently dealing with a situation involving two components: report-form and comment-form. The report form contains an array of comments, displaying a list of comments and a button for each on ...

What is the best way to convert a recordset to an array using React?

I'm attempting to create an array by retrieving data from a SQL recordset: +------------+------------+------------+ | start_type | field_name | start_text | +------------+------------+------------+ | 0 | Field1 | some text. | +----------- ...

First, download a npm package and integrate it into TSX files

Hello all, I am currently working on my very first project using React, Typescript, and ASP.NET Core. As a beginner in this technology stack, I seek your patience and understanding as I encounter challenges along the way. Right now, I'm facing an issu ...

Will the async pipe activate onPush change detection in Angular?

I have searched various sources for the question above, but I am finding conflicting answers. For example, on Angular University's website, it is mentioned that change detection is triggered when the async pipe receives a new observable value. However ...

What are the essential requirements for an Angular application to function properly with minimal dependencies?

If a new developer wants to begin learning Angular from scratch, what are the essential npm packages that they need to install in order to start building an Angular application with minimal dependencies? ...

Develop a wrapper for a function with multiple variations in TypeScript

Encountering an issue with the code below while attempting to create a proxy for a function with multiple overloads: // The target function function original (a: number): boolean; function original (a: string): boolean; function original (a: boolean): bool ...