Struggling with the TypeScript generic syntax for the GroupBy function

Question

Struggling with the TypeScript generic syntax for the GroupBy function

Struggling to figure out where I'm going wrong with this TypeScript signature after spending some time on it.

I've been working on a group by function:

const group = <T>(items: T[], fn: (item: T) => T[keyof T]) => {
  return items.reduce((prev, next) => {
    const prop = fn(next) as unknown as string;
    return {
      ...prev,
      [prop]: prev[prop] ? [...prev[prop], next] : [next],
    };
  }, {} as any);
};

group(data, (item) => item.type);

The current return type is:

const group: <Item>(items: Item[], fn: (item: Item) => string) => any

What I'm aiming for is:

const group: <Item>(items: Item[], fn: (item: Item) => string) => { admin: Item[], user: Item[] }

Here's the structure of the data:

interface User {
  type: string;
  name: string;
}

const data: User[] = [
  { type: 'admin', name: 'One' },
  { type: 'user', name: 'Two' },
  { type: 'admin', name: 'Three' },
];

I attempted this approach (with the object passed into reduce) but encountered an error and unsure about the solution:

{} as { [key: T[keyof T]: T[]] }

Check out the TS Playground link for the running code

Cheers!

typescript

Answer 1

Answer №1

Observation reveals that 'admin' and 'user' are solely derived from the data array's values (data[number]['type']).
TypeScript, by default, does not make assumptions beyond strings when it comes to values. (However, 'type' and 'name' are exceptions as they come from keys)

If you utilize as const for an array, TypeScript will impose more constraints on the values.
By limiting the valid values of User['type'], you can restrict it effectively:

let PossibleUserTypes = ['admin', 'user'] as const;  

interface User {
  type: typeof PossibleUserTypes[number];
  name: string;
}

const data: User[] = [
  { type: 'admin', name: 'One' },
  { type: 'user', name: 'Two' },
  { type: 'admin', name: 'Three' },
];

const group = <T extends User, U extends string>(items: T[], fn: (item: T) => U) => {
  return items.reduce((prev, next) => {
    const prop = fn(next)
    return {
      ...prev,
      [prop]: prev[prop] ? [...prev[prop], next] : [next],
    };
  }, {} as {[x in U] : T[] } );
};
let temp = group(data, (item) => item.type);
console.log(temp);
/*
inferred typing: 
let temp: {
    admin: User[];
    user: User[];
}
*/

Eliminating the 'as const' will result in the output being { [x: string]: User[];}, without any restrictions.

Note: Instead of using

type: typeof PossibleUserTypes[number];

, you can directly use type: 'admin' | 'user'; the difference lies in no longer accepting just any string like in the original code.

Another option is to use {} as Record<U,T[]> where temp will be interpreted as

Record<'user'|'admin', User[]></code allowing code completion from <code>temp.

to temp.admin and temp.user. Removing as const removes these restrictions.

One might consider applying as const to the data array instead of PossibleUserTypes, but the resulting type would be highly complex (you can explore this yourself):

const data  = [
  { type: 'admin', name: 'One' },
  { type: 'user', name: 'Two' },
  { type: 'admin', name: 'Three' },
] as const 

const group = <T, U extends string>(items: Readonly<T[]>, fn: (item: T) => U) => {
  return items.reduce((prev, next) => {
    const prop = fn(next)
    return {
      ...prev,
      [prop]: prev[prop] ? [...prev[prop], next] : [next],
    };
  }, {} as {[x in U] : T[] } );
};
let temp = group(data, (item) => item.type);
console.log(temp)

Answer 2

Observation reveals that 'admin' and 'user' are solely derived from the data array's values (data[number]['type']).
TypeScript, by default, does not make assumptions beyond strings when it comes to values. (However, 'type' and 'name' are exceptions as they come from keys)

If you utilize as const for an array, TypeScript will impose more constraints on the values.
By limiting the valid values of User['type'], you can restrict it effectively:

let PossibleUserTypes = ['admin', 'user'] as const;  

interface User {
  type: typeof PossibleUserTypes[number];
  name: string;
}

const data: User[] = [
  { type: 'admin', name: 'One' },
  { type: 'user', name: 'Two' },
  { type: 'admin', name: 'Three' },
];

const group = <T extends User, U extends string>(items: T[], fn: (item: T) => U) => {
  return items.reduce((prev, next) => {
    const prop = fn(next)
    return {
      ...prev,
      [prop]: prev[prop] ? [...prev[prop], next] : [next],
    };
  }, {} as {[x in U] : T[] } );
};
let temp = group(data, (item) => item.type);
console.log(temp);
/*
inferred typing: 
let temp: {
    admin: User[];
    user: User[];
}
*/

Eliminating the 'as const' will result in the output being { [x: string]: User[];}, without any restrictions.

Note: Instead of using

type: typeof PossibleUserTypes[number];

, you can directly use type: 'admin' | 'user'; the difference lies in no longer accepting just any string like in the original code.

Another option is to use {} as Record<U,T[]> where temp will be interpreted as

Record<'user'|'admin', User[]></code allowing code completion from <code>temp.

to temp.admin and temp.user. Removing as const removes these restrictions.

One might consider applying as const to the data array instead of PossibleUserTypes, but the resulting type would be highly complex (you can explore this yourself):

const data  = [
  { type: 'admin', name: 'One' },
  { type: 'user', name: 'Two' },
  { type: 'admin', name: 'Three' },
] as const 

const group = <T, U extends string>(items: Readonly<T[]>, fn: (item: T) => U) => {
  return items.reduce((prev, next) => {
    const prop = fn(next)
    return {
      ...prev,
      [prop]: prev[prop] ? [...prev[prop], next] : [next],
    };
  }, {} as {[x in U] : T[] } );
};
let temp = group(data, (item) => item.type);
console.log(temp)

Answer 3

Answer №2

The function signature does not specify the return type of the function. To define the return type as T, you can modify it like this:

const group = <T>(items: T[], fn: (item: T) => T[keyof T]):T => { return items.reduce((prev, next) => {
const prop = fn(next) as unknown as string;
return {
  ...prev,
  [prop]: prev[prop] ? [...prev[prop], next] : [next],
};}, {} as any);};
console.log(group<Item>(data, (item) => item.type));

Try running this code in the Typescript playground here

I made some changes to the code based on your comment. You can view the updated version here. The return type must be a static type.

Answer 4

The function signature does not specify the return type of the function. To define the return type as T, you can modify it like this:

const group = <T>(items: T[], fn: (item: T) => T[keyof T]):T => { return items.reduce((prev, next) => {
const prop = fn(next) as unknown as string;
return {
  ...prev,
  [prop]: prev[prop] ? [...prev[prop], next] : [next],
};}, {} as any);};
console.log(group<Item>(data, (item) => item.type));

Try running this code in the Typescript playground here

I made some changes to the code based on your comment. You can view the updated version here. The return type must be a static type.

Struggling with the TypeScript generic syntax for the GroupBy function

Answer №1

Answer №2

Similar questions

Having difficulty locating the correct TypeScript interface for executing GraphQL queries in a React application using Apollo Client

Tips for converting API data to DTO (Data Transfer Object) using TypeScript

Showing the child component as undefined in the view

Tips for Logging HTTP Communication Errors in Angular

What is the proper way to utilize variables in package.json with npm version 7.x.x?

Verify the anticipated URL and showcase the real URL

Angular-template static functions refer to functions that do not require an

In production mode, ExpressJs dispatches the stack efficiently

What are the essential requirements for an Angular application to function properly with minimal dependencies?

Access an Angular 2 component through an email hyperlink including querystring parameters

Create a new data structure in TypeScript that stores multiple values in a

NodeJS can be used to convert JSON data into an XLSX file format and allow for

TypeORM find query is returning a data type that does not match the defined entity type

Troubleshooting the NullInjectorError in Angular - Service Provider Missing?

Is Babel necessary for enabling JavaScript compatibility in my TypeScript React project, excluding Create React App?

Extending a Typescript class from another file

Tips for transferring information between two components when a button is clicked in Angular 2

A step-by-step guide on bundling a TypeScript Language Server Extensions LSP using WebPack

Share information by including the provider within the @component declaration in Angular

A Vue component library devoid of bundled dependencies or the need for compiling SCSS files