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

What is the best way to eliminate duplicate data from an HTTP response before presenting it on the client side?

RxJS emits an array of strings with a one second interval between each emission

Exploring ways to display all filtered chips in Angular

Construct an outdated angular project from scratch

Exploring the intricacies of extracting nested JSON data in TypeScript

Is there a more efficient method for providing hooks to children in React when using TypeScript?

Are there more efficient methods for locating a particular item within an array based on its name?

Utilize the npm module directly in your codebase

Having difficulty utilizing defineProps in TypeScript

The search for d.ts declaration files in the project by 'typeRoots' fails

Converting a string to the Date class type in Angular 4: A comprehensive guide

Angular production application is experiencing issues due to a missing NPM package import

Aggregating all elements in an array to generate a Paypal order

What could be the reason behind TypeScript ignoring a variable's data type?

Tips for streamlining a conditional statement with three parameters

Enhance your AJAX calls with jQuery by confidently specifying the data type of successful responses using TypeScript

Customizing a generic method in typescript

Which TypeScript AsyncGenerator type returns a Promise?

Ways to implement the flow of change occurrences in the mat-select component

Issue encountered when attempting to assign `fontWeight` within `makeStyles` using `theme` in Typescript: Error message states that the property is not