Can a utility be used to generate a key name based on another key?

Question

Can a utility be used to generate a key name based on another key?

Is it possible to dynamically generate a new interface based on an existing one, with key names derived from the originals?

Here's an example of what I'm trying to achieve:

If we have this source object:

interface Car {
  brand: Brand;
  model: string;
  year: number;
}

I want to declare an interface like this:

interface CarSetters {
  setBrand: (brand: Brand) => any;
  setModel: (model: string) => any;
  setYear: (year: number) => any;
}

However, instead of manually declaring it as shown above, I'd like to be able to use something like:

type CarSetters = Setters<Car>

or

type CarState = Car & Setters<Car>

typescript generics typescript-generics derived-types

Answer 1

Answer №1

It appears to be a straightforward mapping:

type Brand = boolean;
interface Car {
  brand: Brand;
  model: string;
  year: number;
};
type CarSetters = {
    [T in keyof Car as `set${Capitalize<T>}`]: (newValue: Car[T]) => any;
};

To prevent symbols from causing complications, you can use:

type CarSetters = {
    [T in keyof Car as T extends symbol ? never : `set${Capitalize<T>}`]: (newValue: Car[T]) => any;
};

or

type CarSetters = {
    [T in keyof Car as T extends symbol ? never : `set${Capitalize<T>}`]: (newValue: Car[T]) => any;
} & {
    [T in keyof Car as T extends symbol ? T : never]: Car[T];
};

Answer 2

It appears to be a straightforward mapping:

type Brand = boolean;
interface Car {
  brand: Brand;
  model: string;
  year: number;
};
type CarSetters = {
    [T in keyof Car as `set${Capitalize<T>}`]: (newValue: Car[T]) => any;
};

To prevent symbols from causing complications, you can use:

type CarSetters = {
    [T in keyof Car as T extends symbol ? never : `set${Capitalize<T>}`]: (newValue: Car[T]) => any;
};

or

type CarSetters = {
    [T in keyof Car as T extends symbol ? never : `set${Capitalize<T>}`]: (newValue: Car[T]) => any;
} & {
    [T in keyof Car as T extends symbol ? T : never]: Car[T];
};

Answer 3

Answer №2

Thanks to guidance from the helpful CertainPerformance's answer on StackOverflow, I was able to develop a generic solution that perfectly aligns with my requirements. This solution not only answered my initial question but also prompted me to share the generics I crafted:

type Mutators<T> = {
  [K in keyof T as K extends string ? `update${Capitalize<K>}` : never]: (
    updatedValue: T[K]
  ) => any;
};

type ModifiedState<T> = T & Mutators<T>

Answer 4

Thanks to guidance from the helpful CertainPerformance's answer on StackOverflow, I was able to develop a generic solution that perfectly aligns with my requirements. This solution not only answered my initial question but also prompted me to share the generics I crafted:

type Mutators<T> = {
  [K in keyof T as K extends string ? `update${Capitalize<K>}` : never]: (
    updatedValue: T[K]
  ) => any;
};

type ModifiedState<T> = T & Mutators<T>

Can a utility be used to generate a key name based on another key?

Answer №1

Answer №2

Similar questions

How can I run a Redis Server on a port other than the default 6379 port using ioredis?

When the imagepath in an Angular application is not updated, it will revert to null

Angular 6 is experiencing an issue with the functionality of the file toggle JS

How can one break down enum values in typescript?

Acquire XML documentation for overloaded functions in Typescript

Tips for encapsulating a promise while maintaining the original return type

The MaterialTable component is indicating that there is no property called 'tableData' on the IPerson type

Angular 2 - update browsing history by replacing instead of adding to it

Does an async function get automatically awaited if called in a constructor?

Navigating an array using ngFor and encountering an error message saying, "Identifier not specified"

What is the best way to create a generic variable and function that utilize the same type?

Building a dropdown menu component in react native

Troubles with Angular2 template parser when parsing HTML fragment that is W3C validated

Angular error: The object prototype can only be an Object or null, not undefined

Search through an array of objects and assign a new value

Next.js is perplexing me by throwing an error about Event handlers not being able to be passed to Client Component props, even though the component clearly has "use client" at

Implementation of a function in Typescript that can be defined with a

NextImage's ImageProps is overriding src and alt properties

How can CSS variables be applied to a hover property within an Angular directive?

How can I ensure the end of the list is clearly visible?