Crafting a Retro Style

Question

Crafting a Retro Style

I have an interface called Product which includes properties such as name, and I want to track changes to these products using a separate interface called Change. A Change should include the original Product as well as all of its properties prefixed with the word previous.

While manually creating this type is possible, I believe there may be a way to define a type for this. My current approach looks something like this:

type Previous<T> = T extends /* all properties of T prefixed with `previous` */

Any suggestions?

typescript

Answer 1

Answer №1

To create a similar type, you can utilize template literal types as outlined in the Typescript documentation.

The following is an example of how the type definition might appear:

type Previous<Type> = {
    [Prop in keyof Type as \`previous${Capitalize<string & Prop>\`]: Type[Prop]
};

You can then use this type like this:

interface Product {
    name: string;
    price: number;
}

type PreviousProduct = Previous<Product>;

It's important to note that the key remapping with the "as" operator works in TypeScript version 4.1 and later.

Answer 2

To create a similar type, you can utilize template literal types as outlined in the Typescript documentation.

The following is an example of how the type definition might appear:

type Previous<Type> = {
    [Prop in keyof Type as \`previous${Capitalize<string & Prop>\`]: Type[Prop]
};

You can then use this type like this:

interface Product {
    name: string;
    price: number;
}

type PreviousProduct = Previous<Product>;

It's important to note that the key remapping with the "as" operator works in TypeScript version 4.1 and later.

Crafting a Retro Style

Answer №1

Similar questions

The string property I pass to the List component with the flexDirection style is meant to be implemented, but unfortunately, an error occurs

Exporting the interface for the state of the redux store

There are a total of 152 issues found in the index.tsx file within the react

Changing TypeScript Enum from String to Number in Angular

Unusual behavior of Typescript with Storybook's addon-docs

The child component is receiving undefined props, yet the console.log is displaying the actual values of the props

Getting object arguments from an npm script in a NodeJS and TypeScript environment can be achieved by following these steps

Converting an Observable variable to a specific type in Typescript

Navigating the correct way to filter JSON data using HttpClient in Angular 4

Is the validity of the expression !args.value || args.value.length true?

Exploring the possibilities with Rollbar and TypeScript

An informative step-by-step approach to constructing Angular applications utilizing npm and TypeScript

Can you provide input to the reducer function?

How about utilizing React's conditional rendering feature?

Setting the TypeScript version while initializing CDK

The data stored in a FormGroup does not automatically transfer to FormData

Storing the typeof result in a variable no longer aids TypeScript in type inference

Verify that each field in the form contains a distinct value

Pre-requisites verification in TypeScript

Debug errors occur when binding to computed getters in Angular 2