There seems to be an issue with the reduction function in TypeScript, where an element is implicitly assigned the 'any' type due to the type of expression

Question

There seems to be an issue with the reduction function in TypeScript, where an element is implicitly assigned the 'any' type due to the type of expression

I'm having an issue with the following code which represents grades of students.

let students: {
  [k: number]: string[]
} = {};

students[1] = ["Student 1", "Student 2"];
students[2] = ["Student 3", "Student 4"];

console.log(students);

Object.keys(students).reduce((c, v) => {
  c[v] = 111; //I am assigning arbitrary values here. THIS IS WHERE THE ERROR OCCURS

  return c;
}, {});

The error message I'm encountering is:

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

The expected output is as follows: The value 111 is just a placeholder. There will be relevant data inserted later.

{1: 111, 2: 111}

Any help would be greatly appreciated. Thank you.

javascript typescript

Answer 1

Answer №1

It appears that the number you are utilizing has been converted to a string, allowing you to use the string as a key (although this is not directly related to the current issue). To resolve this problem, consider adding:

{} as { [k: string]: any }

type Student = {
  [k: string]: string[];
};

let students: Student = {};

students[1] = ["Student 1", "Student 2"];
students[2] = ["Student 3", "Student 4"];

console.log(students);

const keys = Object.keys(students);

const foo = keys.reduce(
  (c, v) => {
    c[v] = 111;

    return c;
  },
  {} as { [k: string]: any },
);

console.log("foo", foo);

Answer 2

It appears that the number you are utilizing has been converted to a string, allowing you to use the string as a key (although this is not directly related to the current issue). To resolve this problem, consider adding:

{} as { [k: string]: any }

type Student = {
  [k: string]: string[];
};

let students: Student = {};

students[1] = ["Student 1", "Student 2"];
students[2] = ["Student 3", "Student 4"];

console.log(students);

const keys = Object.keys(students);

const foo = keys.reduce(
  (c, v) => {
    c[v] = 111;

    return c;
  },
  {} as { [k: string]: any },
);

console.log("foo", foo);

Answer 3

Answer №2

The reduce() method is defined as a generic function that requires a type parameter, eliminating the need for a type assertion:

type Person = {
  [key: string]: string[];
};

const people: Person = {};

people[1] = ["Person 1", "Person 2"];
people[2] = ["Person 3", "Person 4"];

const keys = Object.keys(people);

const result = keys.reduce<{[key: string]: any}>(
  (acc, val) => {
    acc[val] = 111;

    return acc;
  },
  {},
);

console.log("result", result);

^{Playground link}

Answer 4

The reduce() method is defined as a generic function that requires a type parameter, eliminating the need for a type assertion:

type Person = {
  [key: string]: string[];
};

const people: Person = {};

people[1] = ["Person 1", "Person 2"];
people[2] = ["Person 3", "Person 4"];

const keys = Object.keys(people);

const result = keys.reduce<{[key: string]: any}>(
  (acc, val) => {
    acc[val] = 111;

    return acc;
  },
  {},
);

console.log("result", result);

^{Playground link}

Answer 5

Answer №3

To specify the type of 'v' in order to avoid using a string as an index, you can utilize the following approach:

Object.keys(students).reduce((accumulator, currentValue) => {
  accumulator[currentValue as keyof students] = 111;

  return accumulator;
}, {});

Answer 6

To specify the type of 'v' in order to avoid using a string as an index, you can utilize the following approach:

Object.keys(students).reduce((accumulator, currentValue) => {
  accumulator[currentValue as keyof students] = 111;

  return accumulator;
}, {});

There seems to be an issue with the reduction function in TypeScript, where an element is implicitly assigned the 'any' type due to the type of expression

Answer №1

Answer №2

Answer №3

Similar questions

Modifying Element Values with JavaScript in Selenium using C#

Quantify the duration it takes for Angular to display a directive

Top method for dynamically loading a specific component by using its selector as a variable

What is the best way to determine if an object is empty?

Display a specific division depending on the outcome of an Ajax request within a PHP form

Console output shows that the function results in undefined

Zeroclipboard will fail to copy the text

Tips for dynamically populating nested collections in Firestore continuously

How to correctly type socket events when developing a customized useSocket hook in TypeScript?

What might be causing res.download to retrieve a zip file that is empty?

How to properly handle file uploads and get the correct image path from Node Js (Express) to React Js?

Filter a div based on multiple conditions using JavaScript/jQuery

Avoid altering the background color when adjusting the scale view on an apex chart due to changes in graph data

How can I keep the cursor in place while editing a phone number field on Sencha ExtJS?

Notify AngularJS of changes to the model

How to utilize FileReader for parsing a JSON document?

Progress bar for Ajax loading with an extensive list

StopDefault and JSON Placement

perform one task following the completion of another

Is `console.log()` considered a native function in JavaScript?