Generate the return type dynamically based on an array parameter containing objects in TypeScript

Question

Generate the return type dynamically based on an array parameter containing objects in TypeScript

Consider the following TypeScript definition:

interface Configuration {
    field: string
}
function bar<T extends Configuration>(arr: T[]): Record<T['field'], undefined>
function bar(arr: Configuration[]): Record<string, undefined> {
  const object = {}
  _.forEach(arr, item => {
    object[item.field] = undefined
  })

  return object
}

const outcome = bar([{field: 'example'}])
outcome.test // This should prompt an error as the array argument does not include an object with a field of "test".

The code above was inspired by Dynamically generate return type based on parameter in TypeScript, although my scenario involves an array of objects rather than an array of strings.

The issue lies in the fact that the type of outcome is Record<string, undefined> when I intend it to be

Record<'example', undefined>

. It seems that my return type declaration of

Record<T['field'], undefined>

may be incorrect (as T represents an array of objects similar to Configuration) but finding the correct specification for this generic type has proven challenging.

Any assistance on this matter would be greatly appreciated.

typescript typescript-typings

Answer 1

Answer №1

section, it has been highlighted by other responses that TypeScript tends to widen the inferred type of a string literal value from its original string literal type, such as "bar", to simply 'string'. Several methods have been suggested to prevent this widening behavior. One approach is for the user invoking foo() to explicitly specify or assert the type of "bar" as "bar" rather than just 'string'. This can be achieved with annotations or assertions within the code. Another option introduced in TypeScript 3.4 is using const assertions when calling foo(). This allows for a narrower type without explicitly mentioning it. Furthermore, adjustments to the type signature of foo() itself can also enforce non-widening behavior automatically during normal function calls. By adding a new type parameter S extends string and defining T accordingly, one can influence the compiler to infer the desired types accurately. It may seem like magic, but the result proves effective in maintaining non-widening output.

Answer 2

section, it has been highlighted by other responses that TypeScript tends to widen the inferred type of a string literal value from its original string literal type, such as "bar", to simply 'string'. Several methods have been suggested to prevent this widening behavior. One approach is for the user invoking foo() to explicitly specify or assert the type of "bar" as "bar" rather than just 'string'. This can be achieved with annotations or assertions within the code. Another option introduced in TypeScript 3.4 is using const assertions when calling foo(). This allows for a narrower type without explicitly mentioning it. Furthermore, adjustments to the type signature of foo() itself can also enforce non-widening behavior automatically during normal function calls. By adding a new type parameter S extends string and defining T accordingly, one can influence the compiler to infer the desired types accurately. It may seem like magic, but the result proves effective in maintaining non-widening output.

Answer 3

Answer №2

The issue arises from the object literal {fieldName: 'bar'} being categorized as type {fieldName: string}, rather than the more specific type {fieldName: 'bar'}. Consequently, any actions performed with the object, like placing it in an array and passing it to a generic function, will not be able to retrieve the string literal type 'bar' from its type because that string literal is not initially included in its type.

An alternative approach is to create your object using a generic function instead of an object literal to maintain the stricter fieldName property type:

function makeObject<T>(s: T): { fieldName: T } {
    return { fieldName: s };
}

const result = foo([ makeObject('bar') ])

// type error: Property 'baz' does not exist on type Record<'bar', undefined>
result.baz

Playground Link

Answer 4

The issue arises from the object literal {fieldName: 'bar'} being categorized as type {fieldName: string}, rather than the more specific type {fieldName: 'bar'}. Consequently, any actions performed with the object, like placing it in an array and passing it to a generic function, will not be able to retrieve the string literal type 'bar' from its type because that string literal is not initially included in its type.

An alternative approach is to create your object using a generic function instead of an object literal to maintain the stricter fieldName property type:

function makeObject<T>(s: T): { fieldName: T } {
    return { fieldName: s };
}

const result = foo([ makeObject('bar') ])

// type error: Property 'baz' does not exist on type Record<'bar', undefined>
result.baz

Playground Link

Answer 5

Answer №3

Here is a possible solution:

interface Configuration {
    property: string;
}
function myFunction<T extends Configuration>(arr: ReadonlyArray<T>) {
    const object = {} as { [P in T["property"]]: undefined };
    arr.forEach(item => {
        object[item.property] = undefined;
    });

    return object;
}

const output = myFunction([{ property: "example" }, { property: "test" }] as const);
output.another; // error

The crucial part here is using the array as const to maintain the type integrity and allow the generic function to correctly infer T. In this case, T becomes

{ readonly property: "example" } | { readonly property: "test" }

resulting in T["property"] being

"example" | "test"

and so on.

Answer 6

Here is a possible solution:

interface Configuration {
    property: string;
}
function myFunction<T extends Configuration>(arr: ReadonlyArray<T>) {
    const object = {} as { [P in T["property"]]: undefined };
    arr.forEach(item => {
        object[item.property] = undefined;
    });

    return object;
}

const output = myFunction([{ property: "example" }, { property: "test" }] as const);
output.another; // error

The crucial part here is using the array as const to maintain the type integrity and allow the generic function to correctly infer T. In this case, T becomes

{ readonly property: "example" } | { readonly property: "test" }

resulting in T["property"] being

"example" | "test"

and so on.

Generate the return type dynamically based on an array parameter containing objects in TypeScript

Answer №1

Answer №2

Answer №3

Similar questions

Deleting an element from a two-field object in TypeScript 2

Angular2 is throwing an error: "NavigationService provider not found! (MenuComponent -> NavigationService)"

Unable to utilize class identifiers in TypeScript because of 'incompatible call signatures' restriction

Encountering the error message "TypeError: Unable to access properties of null (reading 'get')" while utilizing useSearchParams within a Storybook file

Add additional characteristics to the current interface without needing to create a separate interface

Managing relationships within TypeORM's single table inheritance using a base class for targeting relations

Connecting peers to servers using WebRTC

Starting a nested JSON structure with TypeScript and Angular 7

The optimal location to declare a constructor in Typescript

Testing Functions Defined on Window Object in Jest and TypeScript: A Comprehensive Guide

Struggling to set up a Jest testing module for a NestJs service. Encountering an issue where Nest is unable to resolve dependencies of the UsersService, specifically the Config

"Ensuring function outcomes with Typescript"Note: The concept of

Using React and TypeScript, open the initial tab from a mapped array with an accordion component

Encountering an issue with Angular virtual scrolling: ViewDestroyedError arises when trying to utilize a destroyed view during detectChanges operation

Angular 2 integration for Oauth 2 popup authorization

What is the best way to explain a function that alters an object directly through reference?

Opacity levels for AM5 chart columns

The return type of a getter is `any` if the object contains a method and is processed by a generic function

What is causing the .responseToString function to be recognized as not a function?

Guide to Generating a Compilation Error with Method Decorators in Typescript