The method 'toLowerCase' is not present on the specified type 'T[keyof T]'

Question

The method 'toLowerCase' is not present on the specified type 'T[keyof T]'

I'm currently working on a function that uses generic types to take two arguments (an array of objects and a search term), but I keep encountering an error - The property 'toLowerCase' is not available on the type 'T[keyof T]'

Here's the function:

function findMatchingTerms<T>(data: T[], searchTerm: string): T[] {
  return data.filter((obj) => {
    const filteredData = (Object.keys(obj) as Array<keyof typeof obj>).some((value) => {
      return (
        typeof obj[value] === "string" && obj[value].toLowerCase().includes(searchTerm.toLowerCase())
      );
    });
    return filteredData;
  });
}

What am I missing here?

javascript arrays typescript generics javascript-objects

Answer 1

Answer №1

This solution seems to be addressing a similar issue mentioned in this link: https://github.com/microsoft/TypeScript/issues/10530

To improve type inference, it is suggested to extract obj[value] into a variable as shown below:

function matchSearchTerm<T>(data: T[], search: string): T[] {
  return data.filter((obj) => {
    const filteredData = (Object.keys(obj) as Array<keyof typeof obj>).some((value) => {
      const val = obj[value];
      return (
        typeof val === "string" && val.toLowerCase().includes(search.toLowerCase())
      );
    });
    return filteredData;
  });
}

Answer 2

This solution seems to be addressing a similar issue mentioned in this link: https://github.com/microsoft/TypeScript/issues/10530

To improve type inference, it is suggested to extract obj[value] into a variable as shown below:

function matchSearchTerm<T>(data: T[], search: string): T[] {
  return data.filter((obj) => {
    const filteredData = (Object.keys(obj) as Array<keyof typeof obj>).some((value) => {
      const val = obj[value];
      return (
        typeof val === "string" && val.toLowerCase().includes(search.toLowerCase())
      );
    });
    return filteredData;
  });
}

Answer 3

Answer №2

What do you think of this approach:

return obj[value]['toLowerCase']?.call(obj[value]).includes(search.toLowerCase())

From my perspective, it seems to be returning either true, false, or undefined. This is suitable for filters in my opinion. Alternatively, we could use a ternary operator if we only want a true/false outcome.

Answer 4

What do you think of this approach:

return obj[value]['toLowerCase']?.call(obj[value]).includes(search.toLowerCase())

From my perspective, it seems to be returning either true, false, or undefined. This is suitable for filters in my opinion. Alternatively, we could use a ternary operator if we only want a true/false outcome.

Answer 5

Answer №3

function filterBySearchTerm<T extends Record<string, string>>(items: T[], term: string) {
  return items.filter((item) => {
    const filteredItem = (Object.keys(item) as Array<keyof T>).some((value) => {
      const checkValue = item[value]
      return (
        typeof item[value] === "string" && item[value].toLowerCase().includes(term.toLowerCase())
      );
    });
    return filteredItem;
  });
}

Enhance the T generic type with an additional constraint:

T extends Record<string, string>

Answer 6

function filterBySearchTerm<T extends Record<string, string>>(items: T[], term: string) {
  return items.filter((item) => {
    const filteredItem = (Object.keys(item) as Array<keyof T>).some((value) => {
      const checkValue = item[value]
      return (
        typeof item[value] === "string" && item[value].toLowerCase().includes(term.toLowerCase())
      );
    });
    return filteredItem;
  });
}

Enhance the T generic type with an additional constraint:

T extends Record<string, string>

The method 'toLowerCase' is not present on the specified type 'T[keyof T]'

Answer №1

Answer №2

Answer №3

Similar questions

Why is my showMap() function not executing when the button is clicked? How can I resolve this issue in JavaScript?

Incorporate the operating hours of a Business

Using JQuery to test for element visibility in Jest tests

Transforming a string into key-value pairs using Typescript

I have a task that requires me to click on the 'OK' button within an ALERT pop-up while using Selenium on Internet Explorer

Error: The callback specified is not a valid function

How to Implement Search Functionality in a Multiple Select Dropdown using Select2 Plugin in VueJS

Setting a consistent theme or style for all HTML/React tags using a selector inside a specific component

Verify whether the div already includes a particular item

Trigger pipeline to terminate on identification of dependencies by npm audit

JS Unable to get scrollIntoView function to work with mousewheel event

Tips for preventing errors in JavaScript date formatting

Exploring the method of extracting multiple checkbox values from an HTML form

Utilizing numpy for modifying a binary vector

Can someone guide me on how to organize a div structure into a table format with the help of JQuery

Booking.com's embedded content is experiencing display issues

Combining httpProvider responseInterceptor with $http error callback does not function properly

The z-index property in jQuery dialog does not seem to function properly when used within an

Error Message: "Issue with jQuery mobile: Uncaught TypeError - Unable to read property 'abort' of undefined during AJAX request"

Buttons and links with intricate geometries