Creating a return type in Typescript Generics depending on the provided argument

Question

Creating a return type in Typescript Generics depending on the provided argument

Could you assist in creating a dynamic TypeScript return type based on whether an argument is undefined or not?

Here is a export interface ToObject<T> { [k: string]: T; } export const toObject = <T, V = (keyof T)>( list: T[], key: keyof T, valueKey?: V ): V extends keyof T ? ToObject<T> : ToObject<T[keyof T]> => valueKey === undefined ? list.reduce((all, cur) => ({ ...all, [cur[key] as unknown as string]: cur }), {} as ToObject<T>) : list.reduce((all, cur) => ({ ...all, [cur[key] as unknown as string]: cur[valueKey as unknown as keyof T] }), {} as ToObject<T[keyof T]>);

Usage :

interface Data{
  a: string;
  b: string;
  c: string;
}
const list: Data[] = [
  {a:'a', b: 'b', c: 'c'},
  {a:'1', b: '2', c: '3'}
];

// use 1
toObject<Data>(list, 'a');
// response
{
  {'a': {a:'a', b: 'b', c:'c'}},
  {'1': {a:'1', b:'2', c: '2'}},
}

// Use 2
toObject<Data>(list, 'a', 'b');
//response
{ {'a': 'b'}, {'1': '2'} }

ISSUE:

// use 1 ERROR -> Cant do this
const dataMap: ToObject<Data> = toObject<Data>(list, 'a');
// Type 'ToObject<Data> | ToObject<string>' is not assignable to type 'ToObject<Data>'.
// Type 'ToObject<string>' is not assignable to type 'ToObject<Data>'.
// Type 'string' is not assignable to type 'Data'.(2322)

// Use 2 ERROR -> Cant do this
const dataKeyMap: ToObject<string> = toObject<Data>(list, 'a', 'b');
// Type 'ToObject<Data> | ToObject<string>' is not assignable to type 'ToObject<string>'.
// Type 'ToObject<Data>' is not assignable to type 'ToObject<string>'.
// Type 'Data' is not assignable to type 'string'.(2322)

typescript typescript-generics

Answer 1

Answer №1

Initially, TS lacks sufficient information to distinguish between the two return types of toObject.

By incorporating function overloads, we can associate a specific return type with a function signature. If the valueKey is provided, toObject will yield ToObject<T[keyof T]>; otherwise, it will output ToObject<T>.

export function toObject <T, V = (keyof T)>(list: T[], key: keyof T): ToObject<T>
export function toObject <T, V = (keyof T)>(list: T[], key: keyof T, valueKey: V): ToObject<T[keyof T]>
export function toObject <T, V = (keyof T)>(list: T[], key: keyof T, valueKey?: V): ToObject<T> | ToObject<T[keyof T]> {
  return valueKey === undefined
    ? list.reduce((all, cur) => ({
      ...all,
      [cur[key] as unknown as string]: cur
    }), {} as ToObject<T>)
    : list.reduce((all, cur) => ({
      ...all,
      [cur[key] as unknown as string]: cur[valueKey as unknown as keyof T]
    }), {} as ToObject<T[keyof T]>);
}

The incorporation of overloads not only satisfies the TypeScript compiler but also offers guidance to users on how to correctly utilize the function.

Answer 2

Initially, TS lacks sufficient information to distinguish between the two return types of toObject.

By incorporating function overloads, we can associate a specific return type with a function signature. If the valueKey is provided, toObject will yield ToObject<T[keyof T]>; otherwise, it will output ToObject<T>.

export function toObject <T, V = (keyof T)>(list: T[], key: keyof T): ToObject<T>
export function toObject <T, V = (keyof T)>(list: T[], key: keyof T, valueKey: V): ToObject<T[keyof T]>
export function toObject <T, V = (keyof T)>(list: T[], key: keyof T, valueKey?: V): ToObject<T> | ToObject<T[keyof T]> {
  return valueKey === undefined
    ? list.reduce((all, cur) => ({
      ...all,
      [cur[key] as unknown as string]: cur
    }), {} as ToObject<T>)
    : list.reduce((all, cur) => ({
      ...all,
      [cur[key] as unknown as string]: cur[valueKey as unknown as keyof T]
    }), {} as ToObject<T[keyof T]>);
}

The incorporation of overloads not only satisfies the TypeScript compiler but also offers guidance to users on how to correctly utilize the function.

Creating a return type in Typescript Generics depending on the provided argument

Answer №1

Similar questions

Error: Interface declaration for _.split is missing in the Lodash.d.ts file

What causes me to create components with incorrect paths?

Using Moment JS to display the days of the upcoming week

The FileSaver application generates a unique file with content that diverges from the original document

Executing Promises in a loop: TypeScript & Angular with IndexedDB

What could be causing NgModel to fail with mat-checkbox and radio buttons in Angular?

The specified function is not recognized within the HTMLButtonElement's onclick event in Angular 4

Utilizing Sequelize with Typescript for referential integrity constraints

Utilizing Typescript's conditional type to determine behavior based on the specific value of a string literal type

Transform the code provided by bundleMDX into an HTML string specifically for RSS, all the while utilizing the mdx-bundler

Converting a generic object from snake_case to camelCase using TypeScript

I aim to link a variable in a directive with a component

How can parameters be implemented in Angular similar to NodeJs Express style?

How can I create a join for my initial column in TypeORM?

"Loop through an array using forEach leads to a subscription that

Unable to activate the AWS IoT security audit using CDK

Is the Scope Staying Static in AngularJS 1.4 when Input Text Changes and Two-Way Binding is Enabled?

Tips for comparing two typed objects using interfaces in React?

Transforming JavaScript into TypeScript within an Angular 4 component class

Interfaces in Typescript