Limit object key type in generics using Typescript

Question

Limit object key type in generics using Typescript

I'm currently facing a challenge while trying to develop a function that arranges an array of objects based on a specific object key. TypeScript keeps throwing an error indicating that the object type is not "any", "number", "bigint" or an "enum". I attempted to restrict the type of the key to only accept number. Surprisingly, it partially functions when invoking the function, as in cases where the argument contains a property that is not a number, an error message pops up.

Argument of type '"b"' is not compatible with parameter of type 'KeysOfType<{ a: number; b: string; c: number; }, number>'.ts(2345)

Nevertheless, I fail to comprehend why TypeScript fails to recognize that the property is indeed a number within the function itself, leading to errors. How can I overcome/resolve this predicament? Could my approach towards typing be incorrect?

Displayed below are the code snippets containing the aforementioned errors:

type KeysOfType<T, KT> = {
  [K in keyof T]: T[K] extends KT ? K : never;
}[keyof T];

export function sortArrayByKey<T, K extends KeysOfType<T, number>>(
  list: T[],
  propertyKey: K
) {
  // The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.ts(2362)
  // The right-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.ts(2363)
  return list.slice().sort((a, b) => (a[propertyKey] - b[propertyKey]));
}

// works
sortArrayByKey([{a: 1, b: 'asd', c: 3.0}, {a: 2, b: '123', c: 2.1}], 'a');

// Argument of type '"b"' is not compatible with parameter of type 'KeysOfType<{ a: number; b: string; c: number; }, number>'.ts(2345)
sortArrayByKey([{a: 1, b: 'asd', c: 3.0}, {a: 2, b: '123', c: 2.1}], 'b');

typescript typescript-generics

Answer 1

Answer №1

Here you can find a similar inquiry, but this question delves into the use of a function constraint rather than a number.

While TypeScript can verify the passed propertyKey during the function call stage, it lacks the ability to validate whether b[propertyKey] is a number within the function body. The type a[propertyKey] is inferred as T[K], which does not indicate whether it is a number. This creates ambiguity since there is no constraint for T. TypeScript only recognizes that K is an allowable type for indexing T.

To address this issue, a constraint should be applied to T. One solution is to define:

T extends Record<PropertyKey, number>

. It may seem restrictive, considering that not all values in an object assigned to

T</code are numbers. Therefore, a transitional function is needed to transform any object <code>T

to

T extends Record<string, number>

.

The transitional function:

const toNumber = <
  Obj extends Record<string, any>,
  Key extends KeysOfType<Obj, number>
>(obj: Obj, key: Key): number => obj[key]

It's noteworthy that an explicit return type number is utilized here. Without it, the return type of this function defaults to T[K]. However, by specifying number, TypeScript permits us to include checks on assignability.

Now, we can formulate our callback for Array.prototype.sort and the main function:

const callback =
  <Obj,>(propertyKey: KeysOfType<Obj, number>) =>
    (a: Obj, b: Obj) =>
      toNumber(a, propertyKey) - toNumber(b, propertyKey);

const sortArrayByKey = <T, K extends KeysOfType<T, number>>(
  list: T[],
  propertyKey: K
) => [...list].sort(callback(propertyKey))

Interactive demo

Answer 2

Here you can find a similar inquiry, but this question delves into the use of a function constraint rather than a number.

While TypeScript can verify the passed propertyKey during the function call stage, it lacks the ability to validate whether b[propertyKey] is a number within the function body. The type a[propertyKey] is inferred as T[K], which does not indicate whether it is a number. This creates ambiguity since there is no constraint for T. TypeScript only recognizes that K is an allowable type for indexing T.

To address this issue, a constraint should be applied to T. One solution is to define:

T extends Record<PropertyKey, number>

. It may seem restrictive, considering that not all values in an object assigned to

T</code are numbers. Therefore, a transitional function is needed to transform any object <code>T

to

T extends Record<string, number>

.

The transitional function:

const toNumber = <
  Obj extends Record<string, any>,
  Key extends KeysOfType<Obj, number>
>(obj: Obj, key: Key): number => obj[key]

It's noteworthy that an explicit return type number is utilized here. Without it, the return type of this function defaults to T[K]. However, by specifying number, TypeScript permits us to include checks on assignability.

Now, we can formulate our callback for Array.prototype.sort and the main function:

const callback =
  <Obj,>(propertyKey: KeysOfType<Obj, number>) =>
    (a: Obj, b: Obj) =>
      toNumber(a, propertyKey) - toNumber(b, propertyKey);

const sortArrayByKey = <T, K extends KeysOfType<T, number>>(
  list: T[],
  propertyKey: K
) => [...list].sort(callback(propertyKey))

Interactive demo

Answer 3

Answer №2

While I believe I have a solution for this, there may be alternative methods that are more efficient:

type KeysOfType<T, KT> = {
  [K in keyof T]: T[K] extends KT ? K : never;
}[keyof T];

export function sortArrayByKey<T, K extends KeysOfType<T, number>>(
  list: T[],
  propertyKey: K
) {
  return list
    .slice()
    .sort(
      (a, b) =>
        (a[propertyKey] as unknown as number) -
        (b[propertyKey] as unknown as number)
    );
}

In this code snippet, I am essentially informing TypeScript about the type of a[propertyKey], emphasizing that it is indeed a number despite any confusion on its part.

Answer 4

While I believe I have a solution for this, there may be alternative methods that are more efficient:

type KeysOfType<T, KT> = {
  [K in keyof T]: T[K] extends KT ? K : never;
}[keyof T];

export function sortArrayByKey<T, K extends KeysOfType<T, number>>(
  list: T[],
  propertyKey: K
) {
  return list
    .slice()
    .sort(
      (a, b) =>
        (a[propertyKey] as unknown as number) -
        (b[propertyKey] as unknown as number)
    );
}

In this code snippet, I am essentially informing TypeScript about the type of a[propertyKey], emphasizing that it is indeed a number despite any confusion on its part.

Limit object key type in generics using Typescript

Answer №1

Answer №2

Similar questions

AmCharts 4: defining the grid interval

The value of the local variable remained unchanged despite the occurrence of global events (window.onresize)

Is there a way to navigate to a specific component selector within an ngFor loop?

The ng-change event fails to trigger when the date change event is activated

Prevent the use of a single equals sign in an if statement

Creating personalized breakpoints in Material UI using TypeScript

Struggling with implementing map() inside another map() within the render() method in React TypeScript

Implementing unique union type in React: Effective ways to declare typescript type for prop value

Ways to conceal table rows depending on their content

Exploring the process of dynamically incorporating headers into requests within react-admin

Is it necessary to include a module in another module if it is not utilized in the template?

The Angular 13 application encounters a "moment is not a function" error after importing an Angular 13 package

Exploring the power of Angular 10 components

Harness the power of moment.js in webpack 4 by integrating it with ts-loader

What is the best method for embedding my token within my user entity?

What causes interface to generate TS2345 error, while type does not?

React Typescript Context state isn't refreshing properly

Variations in assets configuration for ng serve and ng build in Angular 5

The function yields a resolved promise rather than returning data

Implement a click event listener in React.js