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

Getting the PlayerId after a user subscribes in OneSignal with Ionic2

I'm having trouble asynchronously adding a row to a table using the @angular/material:table schematic

Sending SMS from an Angular application to mobile devices can be achieved through several methods

What exactly does RouteComponentProps entail?

Simple steps to turn off error highlighting for TypeScript code in Visual Studio Code

A long error occurred while using the payloadaction feature of the Redux Toolkit

Error: It is not possible to assign a value to the Request property of the Object since it only has a getter method

Substitute all instances of null bytes

Explore one of the elements within a tuple

Creating a type or interface within a class in TypeScript allows for encapsulation of

How to specify the file path for importing a custom module?

Is there a way to enable Tail Recursion Optimization in TypeScript?

What is the correct way to utilize default props in a Typescript-powered React component?

When in development mode, opt for the unminified version of the library in Web

Is it possible to compile TypeScript modules directly into native code within the JavaScript data file?

What is the best way to assign the value of an HTTP GET request to a subarray in Angular 8

The value 'var(--header-position)' cannot be assigned to type 'Position or undefined'

Experimenting with Date Object in Jest using Typescript and i18next

What is the best way to send props to a styled component without needing to convert them to transient props beforehand

The render properties are not compatible with each other