Substitute data types for certain keys within a Typescript interface

Question

Substitute data types for certain keys within a Typescript interface

Within this code snippet, the goal is to create a new type from an existing one by iterating through the keys and only replacing those that meet a specific condition.

Additionally, union types are being utilized here.

class A {}

class B {
    constructor(public a: A, public n: number, public aa: A[]) {}
}

type X = A | B

type ReplaceKeyTypes<Type extends X, NewKeyType> = {
  [Key in keyof Type]: Key extends X ? NewKeyType : Type[Key]
}

const a: A = new A()
const b: B = new B(a, 1, [a, a])

const c: ReplaceKeyTypes<B, string> = {
    a: 'test',
    n: 2,
    aa: ['xyz']
}

In the final lines of the code above, two errors occur:

The assignment of 'number' to 'string' is invalid.
The assignment of 'string[]' to 'string' is invalid.

The questions raised include:

Why does c.n switch to a string even though its initial key type is a number, which doesn't fulfill "Key extends X"?
How can changes be applied to keys that are arrays of the union type as well? For instance, how should c.aa shift from X[] to string[] in this scenario?

typescript

Answer 1

Answer №1

When using Key in keyof Type, you obtain the literal key, which is the string that identifies the key. It's important to remember to retrieve the value type of the key by using Type[Key]. To handle the array case and correct this oversight, here's the revised solution:

type UpdateKeyTypes<Type extends Y, NewKeyType> = {
  [Key in keyof Type]: Type[Key] extends Y[]
    ? NewKeyType[]
      : Type[Key] extends Y
        ? NewKeyType
        : Type[Key]
}

Answer 2

When using Key in keyof Type, you obtain the literal key, which is the string that identifies the key. It's important to remember to retrieve the value type of the key by using Type[Key]. To handle the array case and correct this oversight, here's the revised solution:

type UpdateKeyTypes<Type extends Y, NewKeyType> = {
  [Key in keyof Type]: Type[Key] extends Y[]
    ? NewKeyType[]
      : Type[Key] extends Y
        ? NewKeyType
        : Type[Key]
}

Answer 3

Answer №2

It may not be suitable for replacing multiple keys at once, but if you only need to update one key, you can do the following:

type UpdatedType = Omit<OriginalType, 'keyToModify'> & {
  keyToModify: NewValueType;
};

I have yet to make this code more generic, but it shouldn't be too difficult to accomplish.

Answer 4

It may not be suitable for replacing multiple keys at once, but if you only need to update one key, you can do the following:

type UpdatedType = Omit<OriginalType, 'keyToModify'> & {
  keyToModify: NewValueType;
};

I have yet to make this code more generic, but it shouldn't be too difficult to accomplish.

Answer 5

Answer №3

type X = { x: string; y: string; z: string; }; type Y = Omit<X, "y" | "z">; type Z = Omit<X, "y" | "z"> & { y: number; z: number };

When you hover over Y, you will see this:

type Y = { x: string; }

And type Z is now defined as:

type Z = { x: string; y: number; // Updated z: number; // Updated };

Answer 6

type X = { x: string; y: string; z: string; }; type Y = Omit<X, "y" | "z">; type Z = Omit<X, "y" | "z"> & { y: number; z: number };

When you hover over Y, you will see this:

type Y = { x: string; }

And type Z is now defined as:

type Z = { x: string; y: number; // Updated z: number; // Updated };

Substitute data types for certain keys within a Typescript interface

Answer №1

Answer №2

Answer №3

Similar questions

The click event triggered by the onclick clone/function may not always activate the click handler

What is the best way to integrate @uirouter in the Angular/sampleapp project?

Changing the order of a list in TypeScript according to a property called 'rank'

Connecting multiple TypeScript files to a single template file with Angular: A comprehensive guide

Using a Javascript library within an Angular component: A comprehensive guide

What is the best way to specify a type for an object that may or may not contain a certain property?

What's the issue with conducting a unit test on a component that has dependencies with further dependencies?

Step-by-step guide on adding a command to a submenu through the vscode extension api

Issue encountered with connecting to development server on Expo iOS simulator that is not present when using a browser

Uncertain about the distinction between reducers and dispatchers when it comes to handling actions

What is causing the issue with using transition(myComponent) in this React 18 application?

Dynamically apply classes in Angular using ngClass

Restrictions on pairings of kind variables within generic utilization

Create a functioning implementation for retrieving a list of objects from a REST API

When a card is clicked in the parent component, data is sent to the child component in Angular. The card contains an image, name, ID,

Create a Typescript index signature that incorporates individual generic types for each field

I am looking to transfer information from Angular 4 to Java servlet (cross-domain)

What is the best way to create two MUI accordions stacked on top of each other to each occupy 50% of the parent container, with only their contents scrolling

Angular 2 error: "unknown element" issue persists despite exhausting all attempted solutions

Leveraging generics within TypeScript