Leveraging type parameters within generic limitations in TypeScript

Question

Leveraging type parameters within generic limitations in TypeScript

I'm encountering an issue with my TypeScript code that appears in multiple places:

(Take note of the code snippet on the typescript playground)

let filtered = items.filter(item =>
    item.title.toLowerCase().includes(search.toLowerCase()) ||
    item.name.toLowerCase().includes(search.toLowerCase()) ||
    item.date.toLowerCase().includes(search.toLowerCase())
);

This led me to develop the following function

function filterByKey<T, K extends keyof T>(items: T[], keys: K[], search: string) {
    return items.filter((item) =>
        keys.some((key) => item[key].toString().toLowerCase().includes(search.toLowerCase()))
    );
}

which I intend to use like this:

let filtered = filterByKey(items, ['title', 'name', 'date'], search));

However, I'm facing this error:

Property 'toString' does not exist on type 'T[K]'

I attempted the following approach, but it doesn't seem to be a valid syntax

function filterByKey<T, K extends keyof T, T[K] extends string>(items: T[], keys: K[], search: string)

Is there a way to inform TypeScript that the properties of items will support .toString()?

Alternatively, how would you suggest handling such a scenario to prevent TypeScript from raising complaints?

I referenced the TypeScript documentation here: https://www.typescriptlang.org/docs/handbook/2/generics.html#using-type-parameters-in-generic-constraints

typescript constraints typescript-generics

Answer 1

Answer №1

When working with the filterByKey function in TypeScript, it's important to note that the type T[K] may not be known, resulting in it being treated as unknown. As a result, no method or property of T[K] will be recognized.

To address this issue, we need to include a constraint on the T type to specify that any key associated with T will be of type string.

An improved version of the function could look like this:

function filterByKey<T extends Record<string, string>, K extends keyof T>(items : T[], keys : K[], search : string) {

By implementing this constraint, T[K] will now be guaranteed to be of type string, making methods like toLowerCase valid without needing to utilize toString.

Answer 2

When working with the filterByKey function in TypeScript, it's important to note that the type T[K] may not be known, resulting in it being treated as unknown. As a result, no method or property of T[K] will be recognized.

To address this issue, we need to include a constraint on the T type to specify that any key associated with T will be of type string.

An improved version of the function could look like this:

function filterByKey<T extends Record<string, string>, K extends keyof T>(items : T[], keys : K[], search : string) {

By implementing this constraint, T[K] will now be guaranteed to be of type string, making methods like toLowerCase valid without needing to utilize toString.

Answer 3

Answer №2

Even after attempting that approach, I didn't notice any significant improvement

type StrConvertible = { stringify: () => string };

type StringProps<T> = {
  [K in keyof T as T[K] extends StrConvertible ? K : never]: T[K];
};

function filterByProp<T, K extends keyof StringProps<T>>(
  elements: T[],
  properties: K[],
  searchVal: string
) {
  return elements.filter((element) =>
    properties.some((prop) =>
      element[prop].stringify().toLowerCase().includes(searchVal.toLowerCase())
    )
  );
}

I'm sharing this solution for consideration.

There is always the option to use

(element[prop] as StrConvertible)

, but I prefer to avoid it.

If the issue persists, this method provides a solid alternative.

Answer 4

Even after attempting that approach, I didn't notice any significant improvement

type StrConvertible = { stringify: () => string };

type StringProps<T> = {
  [K in keyof T as T[K] extends StrConvertible ? K : never]: T[K];
};

function filterByProp<T, K extends keyof StringProps<T>>(
  elements: T[],
  properties: K[],
  searchVal: string
) {
  return elements.filter((element) =>
    properties.some((prop) =>
      element[prop].stringify().toLowerCase().includes(searchVal.toLowerCase())
    )
  );
}

I'm sharing this solution for consideration.

There is always the option to use

(element[prop] as StrConvertible)

, but I prefer to avoid it.

If the issue persists, this method provides a solid alternative.

Leveraging type parameters within generic limitations in TypeScript

Answer №1

Answer №2

Similar questions

Executing Typescript build process in VSCode on Windows 10 using Windows Subsystem for Linux

Attach an event listener to a particular textarea element

Whenever I attempt to execute yarn build within next.js, an error always seems to occur

Generating Tree Structure Object Automatically from Collection using Keys

angular directive to receive an object

Tips for creating a generic type that is versatile

React Native error: encountering the error message "undefined is not an object '_this3.props.navigation()'"

Encountering an undefined property error while using Array.filter in Angular 2

Utilizing TypeScript Generics to Dynamically Set Tag Names in React

Map does not provide zero padding for strings, whereas forEach does

How to conceal the side navigation bar on specific pages or components within an Angular application

The `@ViewChild` reference cannot be found

Break apart the string and transform each element in the array into a number or string using a more specific type inference

Utilizing Visual Studio Code for setting breakpoints in Typescript Jasmine tests

Angular Tutorial: Modifying the CSS transform property of HTML elements within a component directly

In TypeScript, there is a mismatch between the function return type

Ways to link information from one entity to another

Declarations for TypeScript in NPM packages

The error message "The type 'MouseEvent' is non-generic in TypeScript" popped up on the screen

Testing the integration of socket.io with Angular through unit tests