Typescript: Generating an Interface Object from Another Interface Using keyof, but Renaming the Key Using a String Concatenation

As a TypeScript developer, you may often come across situations where you need to generate a new interface object from an existing interface. TypeScript provides a powerful feature called keyof that allows you to extract keys from an interface and use them to create new objects. In addition, you can also rename the keys using string concatenation. In this blog post, we will explore how to achieve this using TypeScript.

Using keyof to Extract Keys

The first step is to use the keyof keyword to extract the keys from the source interface. Let’s say we have an interface called SourceInterface with the following properties:

interface SourceInterface {
    prop1: string;
    prop2: number;
    prop3: boolean;
  }

To extract the keys from this interface, we can use the following code:

type Keys = keyof SourceInterface;

The Keys type will now contain the keys "prop1", "prop2", and "prop3". We can use these keys to create a new object with renamed keys.

Renaming Keys Using String Concatenation

Now that we have the keys extracted, we can use string concatenation to rename the keys. Let’s say we want to prefix each key with "new_". We can achieve this by iterating over the keys and creating a new object with the renamed keys. Here’s an example:

const source: SourceInterface = {
    prop1: "value1",
    prop2: 42,
    prop3: true,
  };

  const renamedObject: { [K in Keys as `new_${K}`]: SourceInterface[K] } = Object.fromEntries(
    Object.entries(source).map(([key, value]) => [`new_${key}`, value])
  );

In the above code, we use the { [K in Keys as `new_${K}`]: SourceInterface[K] } syntax to define a new object type with the renamed keys. We then use the Object.fromEntries method to create the new object by mapping over the entries of the source object and renaming the keys using string concatenation.

Final Output

When you run the above code, the renamedObject will contain the following properties:

{
    new_prop1: "value1",
    new_prop2: 42,
    new_prop3: true,
  }

By using the keyof keyword and string concatenation, you can easily generate a new interface object from another interface with renamed keys. This technique can be useful in various scenarios, such as when you need to transform data or create aliases for existing keys.

We hope this blog post has been helpful in understanding how to generate an interface object from another interface using keyof and renaming the keys using string concatenation in TypeScript. If you have any further questions or suggestions, feel free to leave a comment below.

Happy coding!