What is the best way to depict object key replacements within a Typescript definition?

Question

What is the best way to depict object key replacements within a Typescript definition?

I currently have these types:

type PossibleKeys = number | string | symbol;
type ValueOf<T extends object> = T[keyof T]; 
type ReplaceKeys<T extends Record<PossibleKeys, any>, U extends Partial<Record<keyof T, PossibleKeys>> = 
  Omit<T, keyof U> & { [P in ValueOf<U>]: T[keyof U] };

... however, while it is partially working, it's throwing the following error:

Type 'U[keyof U]' cannot be assigned to type 'string | number | symbol'.

A simple demo:

interface Item {
  readonly description: string;
  readonly id: string;
}

interface MyInterface {
  readonly id: string;
  readonly propToReplace: number;
  readonly anotherPropToReplace: readonly Item[];
}

type ReplacedUser = ReplaceKeys<MyInterface, { propToReplace: 'total', anotherPropToReplace: 'items' }>;

In the ReplacedUser type, I can see that it is almost correct. The inferred type is:

{ id: string; total: number | readonly Item[]; items: number | readonly Item[]; }

However, I am expecting:

{ id: string; total: number; items: readonly Item[]; }

What am I doing incorrectly? I would like to understand how to specify that P should receive the values passed in U to prevent Typescript errors and then obtain the correct type for a specific value.

typescript typescript-generics

Answer 1

Answer №1

To simplify the process, consider reversing the type parameter U for your function ReplaceKeys:

type PossibleKeys = number | string | symbol;
type ReplaceKeys<T extends {}, U extends Record<PossibleKeys, keyof T>> = Omit<T, ValueOf<U>> & {
    [K in keyof U]: T[U[K]]
};

You can implement this as follows:

type ReplacedUser = ReplaceKeys<MyInterface, { total: 'propToReplace', items: 'anotherPropToReplace' }>;

If altering the shape of U is not an option, handling it becomes more challenging:

// Types mentioned earlier in the post
interface Item {
  readonly description: string;
  readonly id: string;
}

interface MyInterface {
  readonly id: string;
  readonly propToReplace: number;
  readonly anotherPropToReplace: readonly Item[];
}

// All possible key types
type PossibleKeys = number | string | symbol;

// Helper type to extract non-nullable values from type T
type DefinedValues<T> = NonNullable<T[keyof T]>;

// Helper type for replacement object - a record with valid keys and matching keys in input type T
// 
// Partial ensures that not all keys of T need to be passed in replacements
type Replacements<T extends {}> = Partial<Record<keyof T, PossibleKeys>>;

// Type to swap object keys for values
type Invert<T extends Replacements<C>, C extends {} = {}> = {
  [N in DefinedValues<T>]: {
    [K in keyof T]: N extends T[K] ? K : never
  }[keyof T]
}

type ReplacedKeys<T extends {}, R extends Replacements<T>> = Omit<T, keyof R | DefinedValues<R>> & {
  [N in keyof Invert<R>]: {
    [L in keyof R]: N extends R[L] ? (L extends keyof T ? T[L] : never) : never;
  }[keyof R]
}

However, be cautious when using the second approach as it may not warn you about duplicate mappings:

type ReplacedUser = ReplacedKeys<MyInterface, { propToReplace: 'total', anotherPropToReplace: 'total' }>;

For testing purposes, visit the playground here.

Answer 2

To simplify the process, consider reversing the type parameter U for your function ReplaceKeys:

type PossibleKeys = number | string | symbol;
type ReplaceKeys<T extends {}, U extends Record<PossibleKeys, keyof T>> = Omit<T, ValueOf<U>> & {
    [K in keyof U]: T[U[K]]
};

You can implement this as follows:

type ReplacedUser = ReplaceKeys<MyInterface, { total: 'propToReplace', items: 'anotherPropToReplace' }>;

If altering the shape of U is not an option, handling it becomes more challenging:

// Types mentioned earlier in the post
interface Item {
  readonly description: string;
  readonly id: string;
}

interface MyInterface {
  readonly id: string;
  readonly propToReplace: number;
  readonly anotherPropToReplace: readonly Item[];
}

// All possible key types
type PossibleKeys = number | string | symbol;

// Helper type to extract non-nullable values from type T
type DefinedValues<T> = NonNullable<T[keyof T]>;

// Helper type for replacement object - a record with valid keys and matching keys in input type T
// 
// Partial ensures that not all keys of T need to be passed in replacements
type Replacements<T extends {}> = Partial<Record<keyof T, PossibleKeys>>;

// Type to swap object keys for values
type Invert<T extends Replacements<C>, C extends {} = {}> = {
  [N in DefinedValues<T>]: {
    [K in keyof T]: N extends T[K] ? K : never
  }[keyof T]
}

type ReplacedKeys<T extends {}, R extends Replacements<T>> = Omit<T, keyof R | DefinedValues<R>> & {
  [N in keyof Invert<R>]: {
    [L in keyof R]: N extends R[L] ? (L extends keyof T ? T[L] : never) : never;
  }[keyof R]
}

However, be cautious when using the second approach as it may not warn you about duplicate mappings:

type ReplacedUser = ReplacedKeys<MyInterface, { propToReplace: 'total', anotherPropToReplace: 'total' }>;

For testing purposes, visit the playground here.

What is the best way to depict object key replacements within a Typescript definition?

Answer №1

Similar questions

Ensuring accurate date formatting of API responses in TypeScript

Retrieve the array from within the string

Having trouble installing npm package in Angular project

What is the reason behind TypeScript enclosing a class within an IIFE (Immediately Invoked Function

Checking at compile time whether a TypeScript interface contains one or multiple properties

Error message in Angular states that it is not possible to bind to 'formGroup' because it is not recognized as a property of 'form' within Angular

Utilizing useLocation for Defining Text Styles

How can you run a function in JavaScript or TypeScript that is stored as a string?

Element is missing the necessary "key" property. (React and TypeScript)

How can I transfer information from a map to a child component?

Having trouble retrieving an Enum within an Angular template?

How to resolve the issue of not being able to access functions from inside the timer target function in TypeScript's

Using Typescript to replicate Object.defineProperties

The successful operation of 'Ionic serve --lab' may involve the need to manually save the app.module

Specialized type for extra restriction on enum matching

The limitations of Typescript types influence the program's behavior

Solving CORS policy error in a MEAN stack application deployed on Heroku

Using Typescript to import a module and export a sub function

Refine the search outcomes by specifying a group criteria

Secure your React TypeScript applications with GraphQL authentication