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

Showing data related to a certain value - what's the best way?

Bring in Event Types from React using TypeScript

Having trouble with GraphQL Explorer and Express Sessions compatibility?

The functionality of the disabled button is malfunctioning in the Angular 6 framework

A mistake has occurred: Unhandled promise rejection TypeError: Unable to assign the property 'devices' to an undefined object in Ionic 4 with Angular

The specified reference token grant value of [object Object] could not be located in the store

Executing Cross-Component Communication in Angular 7: A Quick Guide

The file located at 'node_modules/minimatch/dist/cjs/index' does not contain an exported element called 'IMinimatch'. Perhaps you intended to reference 'Minimatch' instead?

A function that takes in a type identifier and a portion of a type, and then outputs the full type

Exploring the Behavior of Typescript Modules

Pass the type of object property as an argument in the function

How can I set up multiple queues in NestJs Bull?

Adding elements to a page while it is running can be achieved using a variety

Steps for injecting strings directly into Angular2 EventBindingWould you like to learn how

An issue has occurred: the function cannot be applied to the intermediate value that is currently being processed

Creating an Inner Join Query Using TypeORM's QueryBuilder: A Step-by-Step Guide

Guide to incorporating code coverage in React/NextJs using Typescript (create-next-app) and cypress

How can I update a dropdown menu depending on the selection made in another dropdown using Angular

Is there a way for me to change the value and placeholder attributes on the Clerk's SignIn component?

Issue TS1192: The module named "A.module" does not contain a default export