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

Retrieving a value in the app component from a map using Angular

Discover the unique value in Angular if it is not present in the list

In Typescript, interfaces are required to have properties written in Pascal Case instead of camel Case

Implementing Dynamic Updates to a Google Sheets Custom Menu using Typescript

What is the process for designing a type that accepts an object and provides an updated version?

AngularJS: The 'myInputName' property is not defined and cannot be read

Cease the interval once the array is devoid of elements

What is the best way to verify the presence of a value in an SQL column?

Error TS2403: All variable declarations following the initial declaration must be of the same type in a React project

Enhancing the level of abstraction in selectors within Redux using TypeScript

NestJS Ensures Type Safety for Mongoose Models, but Model Functions Expecting Incorrect Types (Any)

What is the process for creating static pages that can access local data within a NextJS 13 application?

Angular-template static functions refer to functions that do not require an

Tips and tricks for displaying JSON data in Angular 2.4.10

looking to restrict the interface to only specific types

A guide to teaching TypeScript to automatically determine the type of dynamic new() calls

React application experiencing freezing when setInterval function is utilized

Setting a default value for the dropdown in Angular is essential for ensuring a smooth

TypeScript generic types allow you to create reusable components that

Encountering an unexpected termination error when using Typescript, pg, Express, and Psql within a Docker container: "Error: Connection terminated unexpectedly"