Arranging an array of objects in typescript with elements implicitly having an undefined type

Question

Arranging an array of objects in typescript with elements implicitly having an undefined type

Currently, I am facing a challenge where I need to sort an array of objects within a function. The catch is that the function receives the key as a parameter, making it unknown:

export interface ProductsList {
   id: boolean
   nome: string
   qtde: number
   valor: number
   valorTotal: number
}

const exampleFn = (productsData: ProductsList[], order: string) => {
   if (order !== 'id' && order !== 'nome') {
        productsData.sort((a, b) => b[order] - a[order])
   }
}

The error message related to order reads as follows:

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'ProductsList'.
  No index signature with a parameter of type 'string' was found on type 'ProductsList'

I have attempted adding an index signature to order, but unfortunately, it did not solve the issue.

Any insights or suggestions on what might be causing this problem?

javascript arrays typescript sorting types

Answer 1

Answer №1

When trying to subtract a string or boolean, it doesn't make sense. Instead, you should utilize keyof and an exclude:

export interface ProductsList {
   id: boolean
   nome: string
   qtde: number
   valor: number
   valorTotal: number
}

const exampleFn = (productsData: ProductsList[], order: Exclude<keyof ProductsList, 'id'| 'nome'>) => {
   productsData.sort((a, b) => {
       const c = a[order]
       return b[order] - a[order]
       })
}

update: By using the key check, you can actually avoid the need for exclude!

const exampleFn = (productsData: ProductsList[], order: keyof ProductsList) => {
   if (order !== 'id' && order !== 'nome') {
      productsData.sort((a, b) => {
         const c = a[order]
         return b[order] - a[order]
      })
   }
}

playground

Answer 2

When trying to subtract a string or boolean, it doesn't make sense. Instead, you should utilize keyof and an exclude:

export interface ProductsList {
   id: boolean
   nome: string
   qtde: number
   valor: number
   valorTotal: number
}

const exampleFn = (productsData: ProductsList[], order: Exclude<keyof ProductsList, 'id'| 'nome'>) => {
   productsData.sort((a, b) => {
       const c = a[order]
       return b[order] - a[order]
       })
}

update: By using the key check, you can actually avoid the need for exclude!

const exampleFn = (productsData: ProductsList[], order: keyof ProductsList) => {
   if (order !== 'id' && order !== 'nome') {
      productsData.sort((a, b) => {
         const c = a[order]
         return b[order] - a[order]
      })
   }
}

playground

Arranging an array of objects in typescript with elements implicitly having an undefined type

Answer №1

Similar questions

Adjust the horizontal position of the background by +/- X pixels

Navigating in a Curved Path using Webkit Transition

Updating user data when logged in on multiple browsers can be tricky. Here's how to make sure that

When using Google Maps Autocomplete, always make sure to input the full state name instead of just the state

The image in drag and drop ghost preview is not appearing on Firefox

Displaying URLs stylishly with Pills Bootstrap

The catch-all route handler is triggered following a response being sent by a designated route handler

Creating personalized categories with Material-UI's Autocomplete feature in a React application

Tips for customizing table cell styling in editable cells with React material table

Encountering an issue when running the command "ng new my-app" after updating the @angular/cli package

What is causing my animation to jump when using the Web Animation API reverse() function?

How to Use Conditional In-Line CSS for Internet Explorer and Other Browsers

Using JavaScript to convert date and time into ISO format

Tips for incorporating validation/restrictions into react-datepicker

Strategies for managing the fallback scenario while utilizing 'createReducer' to generate a reducer and 'on' to manage actions

Step by step guide to implementing form step validation in a multi-step jQuery form with radio buttons

Remove item from jQuery's "raw text" HTML

Events bound to JSX elements created in an array map are not being triggered by React

Issues arise when trying to use Prettier and ESlint in conjunction with one another

What are the ways to change a PDF file or web address into a DOCX document using NodeJS?