Creating a versatile TypeScript Record that can accommodate multiple data types

Question

Creating a versatile TypeScript Record that can accommodate multiple data types

I have a question regarding the use of Record in TypeScript. When I specify Record as the parameter type in a function, I encounter an error in my code because it does not allow different types.

type Keys = 'name' | 'qty';

const getValueByKey = <T = any>(items: Record<Keys, T>, key: Keys) => {
  return items[key];
}

getValueByKey({ name: 'fulan', qty: 1}, 'name'); // Error: Type 'number' is not assignable to type 'string'.(2322)

TypeScript Playground

The main aim is to determine the type of the value within the function.

Is there a way to make a Record accept values of varying types? Thank you

typescript types record

Answer 1

Answer №1

It appears that you are looking to create a function that accepts an object type with specific keys in a union, and returns a value based on the provided key parameter while also inferring the valid key parameters from the object itself. This can be achieved using generic constraints.

Remember that TypeScript follows structural typing, meaning any object with keys like `name` and `qty` will be accepted (even if additional keys exist), allowing you to use any of those keys as arguments for the function.

TS Playground

type Key = 'name' | 'qty';

function getValueByKey <
  T extends Record<Key, any>,
  K extends keyof T,
>(items: T, key: K): T[K] {
  return items[key];
}

const obj = {name: 'fulan', qty: 1};

const value1 = getValueByKey(obj, 'name');
    //^? const value1: string

const value2 = getValueByKey(obj, 'qty');
    //^? const value2: number

If you attempt to use a key not present in the object, TypeScript will generate a compiler error:

const value3 = getValueByKey(obj, 'not_a_key');
//                                ~~~~~~~~~~~
// Argument of type '"not_a_key"' is not assignable to parameter of type '"name" | "qty"'. (2345)

Answer 2

It appears that you are looking to create a function that accepts an object type with specific keys in a union, and returns a value based on the provided key parameter while also inferring the valid key parameters from the object itself. This can be achieved using generic constraints.

Remember that TypeScript follows structural typing, meaning any object with keys like `name` and `qty` will be accepted (even if additional keys exist), allowing you to use any of those keys as arguments for the function.

TS Playground

type Key = 'name' | 'qty';

function getValueByKey <
  T extends Record<Key, any>,
  K extends keyof T,
>(items: T, key: K): T[K] {
  return items[key];
}

const obj = {name: 'fulan', qty: 1};

const value1 = getValueByKey(obj, 'name');
    //^? const value1: string

const value2 = getValueByKey(obj, 'qty');
    //^? const value2: number

If you attempt to use a key not present in the object, TypeScript will generate a compiler error:

const value3 = getValueByKey(obj, 'not_a_key');
//                                ~~~~~~~~~~~
// Argument of type '"not_a_key"' is not assignable to parameter of type '"name" | "qty"'. (2345)

Creating a versatile TypeScript Record that can accommodate multiple data types

Answer №1

Similar questions

NextImage's ImageProps is overriding src and alt properties

What is the best way to sort an array based on a person's name?

Executing an HTTP POST request without properly encoding a specific parameter

Updating part of an object using TypeScript

Protractor experiencing difficulty recognizing Angular functionality

Define the state of an object using Parent and Children classes following the application of a filter

Combining namespaces in Typescript declaration files

Guide on enabling external API login with Next Auth v5 in Next.js 14 using the application router

Updating an array in a single line of code in Javascript can be achieved

What could be the reason for the inconsistent behavior of onClick, causing it to occasionally fail to display the associated

Reactjs Promise left hanging in limbo

Is there a way to transform this unusual string into JSON format using Python?

Updating Previous and Next links in an Angular Table following row deletions: A step-by-step guide

Incorporating TypeScript basics into the if statement post compiling

Customized IntelliSense naming for overloaded parameters with conditional tuple types

Issue encountered with ng-include compatibility in Angular 5

Merging two arrays concurrently in Angular 7

Discover the process of accessing and setting values in Angular 8 to easily retrieve and manipulate data from any page!

Modifying the website favicon based on the URL address

Error: TypeScript cannot find @types declaration for restify-client