Invalid index type: Cannot use type 'Number' as an index

When working with TypeScript, I encountered an issue with using an array as a map to access another array of objects. Below is a simplified snippet of my code:

var mp : Number[] = [1, 2, 0];
var arr : any[] = ['a', 4, /regex/];

console.log(arr[mp[2]])

Upon running this code, I received the following error message:

Error TS2538: Type 'Number' cannot be used as an index type.

I have searched for solutions but most do not address such a straightforward scenario involving an array and a Number. Is there a different way to index an array without using a Number object?

arraystypescripttypes

Answer №1

When working with TypeScript, it's important to understand the distinction between the basic number types available: the primitive number and the Object type Number. For a detailed explanation, you can refer to this resource on Stack Overflow.

In JavaScript, there are primitive types (such as number and string) and object types (like Number and String). TypeScript uses the types number and Number to refer to them, respectively.

To illustrate this difference, consider running:

console.log(typeof 1);

You'll see that it outputs number, not Number.

If you adjust your code to use an array of number objects instead of mapping to Numbers, your TypeScript code should compile without any issues.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Initiate two separate asynchronous requests and send the output of the initial request as input to the subsequent one

Managing admin privileges on my website has been challenging. I store user information, including their email and admin status, in a MongoDB database. To determine if a user is an admin, I need to retrieve this information from my Python Flask API using th ...

angulartypescriptauth0

What is the best approach to replace null values with undefined specifically in object properties that cannot be assigned to?

type GraphQLInput = { email: string; age?: null | number | undefined; height?: null | number | undefined; } type PrismaPerson = { email: string; age: number | undefined; height: null | number; } let input: GraphQLInput = { email: "< ...

typescriptgraphqlnexus-prismaprisma2

Dynamic loading of locale in Angular 5 using Angular CLI

Angular 5 offers a solution for loading i18n locale dynamically using registerLocaleData https://angular.io/guide/i18n#i18n-pipes I am interested in loading the locale based on a dynamic setting, such as one stored in localStorage. I tested loading a sin ...

angulartypescriptlocalizationangular-cliangular5

A tip for transferring the value of a binding variable to a method within the template when the button is clicked

I am currently exploring the concept of binding between parent and child components using @Input, @Output, and EventEmitter decorators. This is demonstrated in the HTML snippet below: <h1 appItemDetails [item]="currentItem">{{currentItem}}& ...

javascriptnode.jsangulartypescriptangular-directive

Ways to separate a multi-dimensional array of strings

How can we extract data from a string in an array? The array contains multi-dimensional variables. Example Input String CONTAINER [1, "one", false, [CONTAINER [2, "two", false]], 42, true] Expected Output CONTAINER 1 "one" false [CONTAINER [2, "two", ...

javaarraysregexmultidimensional-arraykotlin

Hovering over the Chart.js tooltip does not display the labels as expected

How can I show the numberValue value as a label on hover over the bar chart? Despite trying various methods, nothing seems to appear when hovering over the bars. Below is the code snippet: getBarChart() { this.http.get(API).subscribe({ next: (d ...

angulartypescriptchart.js

Create a dynamic effect by adding space between two texts on the page

const Button = () => { const options = ['test1', 'test2', 'test3']; return ( <div style={{ position: 'absolute', left: '8px', width: 'auto', flexDirection: 'row' ...

javascriptcssreactjsarrays

Struggling to properly implement background images in a React application using Tailwind CSS

I'm currently developing a React application using Tailwind CSS for styling. In my project, I have an array of items called "trending," and I'm attempting to iterate through them to generate a series of divs with background images. However, I am ...

cssreactjstypescripttailwind-css

Is it possible to transform a tuple type into a union?

Is it possible to map a tuple's generic type to a union type? type TupleToUnion<T> = T[keyof T]; // This will include all values in the tuple const value: TupleToUnion<[7, "string"]> = 2; // This assignment should not be permitted since ...

typescripttuplestypescript-genericsunion-typesmapped-types

What is the best way to update this payload object?

Currently, I'm developing a route and aiming to establish a generic normalizer that can be utilized before storing user data in the database. This is the function for normalization: import { INormalizer, IPayloadIndexer } from "../../interfaces/ ...

javascriptnode.jstypescriptexpresstypes

Guide on accessing js file in an Angular application

I have a component where I need to create a function that can search for a specific string value in the provided JavaScript file. How can I achieve this? The file path is '../../../assets/beacons.js' (relative to my component) and it's named ...

javascriptangulartypescriptfunctionfile

Tips for altering the color of the MUI table sort label icon:

Does anyone know how to change the color of the table sort label icon from gray to red? I am having trouble figuring it out. Any recommendations or suggestions would be greatly appreciated. Here is the code I have been trying to work with: <TableSortL ...

reactjstypescriptmaterial-uistyling

What is the process of exporting a generator function in TypeScript?

Here is an example I have in JavaScript: export function* mySaga () { yield takeEvery('USER_FETCH_REQUESTED', fetchUser); } I'm wondering if it's possible to rewrite it as an arrow function in TypeScript, like the snippet below: ...

javascripttypescriptgenerator

Dividing a JSON array into two separate rows with Spark using Scala

Here is the structure of my dataframe: root |-- runKeyId: string (nullable = true) |-- entities: string (nullable = true) +--------+--------------------------------------------------------------------------------------------+ |runKeyId|entities ...

arraysjsonscalaapache-spark

What amount of memory is required for the largest possible array?

Is it possible to calculate the exact amount of memory required to create the largest possible array in Java? Example Program: public class MemoryOfArraysTest { public static void main(String... args) { Object[] array = new Object[Integer.MAX_ ...

javaarraysmemory

Filtering an RXJS BehaviorSubject: A step-by-step guide

Looking to apply filtering on data using a BehaviorSubject but encountering some issues: public accounts: BehaviorSubject<any> = new BehaviorSubject(this.list); this.accounts.pipe(filter((poiData: any) => { console.log(poiData) } ...

javascriptangulartypescriptrxjs

There was an error encountered trying to access the options (URL) with a 405 method not allowed status. Additionally, the request to load the (URL) failed with a response indicating an

I attempted to retrieve data from an API using httpClient in Angular 5, but encountered errors. Below are the issues I faced: 1) ERROR: when trying to access http://localhost:8080/api/getdata, I received a 405 error (method not allowed). 2) ERROR: failed t ...

angulartypescript

Error encountered in Typescript: The method date.getDate is not recognized as a

My goal is to retrieve the date from the first input control and the number of days from the other input controls, add them together, and assign the result to the third date control using TypeScript. However, I am encountering an error with the following c ...

angulartypescriptdatedatetime

AngularJS: monitoring changes in an array property

For the problem at hand, take a look at this link: http://plnkr.co/edit/ZphAKvZeoVtuGFSEmOKg?p=preview Imagine you have an array structured like this: var arr = [ { 'a': "123", 'b': "654" }, { 'a': "456", &apo ...

javascriptarraysangularjsinheritanceproperties

Obtain values from a specific set, and then filter out values from an array that correspond to the index of that set into distinct arrays

The Problem I'm Facing Currently, I am dealing with a large data table that contains a mix of relevant and irrelevant data. My goal is to filter out the information I care about and display it in a more concise table. Using RegEx, I have managed to i ...

javascriptarraysangulartypescriptset