Using the parameter value as a property name in the return type of a function in TypeScript: a guide

Question

Using the parameter value as a property name in the return type of a function in TypeScript: a guide

After creating a function that converts an object to an array where each element contains the ID of the object, I encountered a new requirement. The current function works great with the following code:

const objectToArray = <T>(object: { [id: string]: T }): (T & { id: string })[] => {
  return Object.keys(object).map((key) => ({ id: key, ...object[key] }))
}

For example,

{ a: { value: 1 }, b: { value: 2 } }

would be converted into

[{ id: 'a', value: 1 }, { id: 'b', value: 2 }]

.

The challenge now is to introduce a second parameter called idField, which specifies the field name in the object to use as the ID field in the returned objects. For instance, setting idField as userId should yield

[{ userId: 'a', value: 1 }, { userId: 'b', value: 2 }]

.

I have managed to implement this logic within the function, but determining the appropriate return type has proven difficult:

export const objectToArray = <T>(object: { [id: string]: T }, idField: string): ???[] => {
  return Object.keys(object).map((key) => ({ [idField]: key, ...object[key] }))
}

I initially tried setting the return type as

(T & { [idField]: string })[]

, only to receive the error

A computed property name in a type literal must refer to an expression whose type is a literal type or a 'unique symbol' type.

.

typescript generics

Answer 1

Answer №1

Understanding the distinction between values (function parameters) being runtime and types being compile-time can be quite complex. In some cases, passing a non-constant string to `idField` can bypass the type check altogether.

However, if you ensure that only constant strings are passed to the function, you can achieve the desired type safety.

Consider this simple example in JavaScript:

function foo(prop) {
    return {
        [prop]: 42
    };
}

To add type annotations, you can modify the function as follows:

function foo<T extends string>(prop: T): Record<T, number> {
    return {
        [prop]: 42
    } as Record<T, number>;
}

This modification ensures that the parameter `prop` is of a specific type, thereby enhancing type checking.

By leveraging such typing techniques, you can enhance the reliability of your codebase.

Answer 2

Understanding the distinction between values (function parameters) being runtime and types being compile-time can be quite complex. In some cases, passing a non-constant string to `idField` can bypass the type check altogether.

However, if you ensure that only constant strings are passed to the function, you can achieve the desired type safety.

Consider this simple example in JavaScript:

function foo(prop) {
    return {
        [prop]: 42
    };
}

To add type annotations, you can modify the function as follows:

function foo<T extends string>(prop: T): Record<T, number> {
    return {
        [prop]: 42
    } as Record<T, number>;
}

This modification ensures that the parameter `prop` is of a specific type, thereby enhancing type checking.

By leveraging such typing techniques, you can enhance the reliability of your codebase.

Using the parameter value as a property name in the return type of a function in TypeScript: a guide

Answer №1

Similar questions

How can TypeScript generics be used to create multiple indexes?

The function signature '() => Element' is incompatible with the type 'string'

Hold off until the RxJS dispatch is resolved

What are some alternatives for integrating React production build files apart from utilizing Express?

TypeScript and Angular: Error Encountered when Trying to Combine Two Arrays

Handling Errors in Angular 4

Having issues with NGXS subscription not functioning properly when selecting a variable

In order to utilize Node.js/Express/Typescript, it is necessary to use the

What is the best approach to dynamically update CSS using onChange in TypeScript?

The combination of Next.JS and React Objects is not acceptable as a React child

Unable to assign dynamic key to Vue 3 directive for object property

Typescript: Securing Data with the Crypto Module

How can I search multiple columns in Supabase using JavaScript for full text search functionality?

Issues with React Material UI Select functionality not performing as expected

Angular has got us covered with its latest feature - combining Async Await with an EventListener

I encountered a SyntaxError while parsing JSON due to an absence of a number after a minus sign at position 1

Are there challenges and ways to handle errors with React Hook Form in Typescript?

Issue encountered while generating dynamic Routes using the map function

Tips for setting up chrome-app typings in Typescript 2

Sending information from a component inside a router-outlet to a higher-level "Parent" component in Angular 2