I am puzzled by this error in Typescript: "Why does the element have an 'any' type when the Object type lacks an index signature?"

Question

I am puzzled by this error in Typescript: "Why does the element have an 'any' type when the Object type lacks an index signature?"

Looking to extract an array of keys from an object with nested properties, my current code:

public static getKeys(obj: Object) {
    let keys: string[] = [];
    for (let k in obj) {
        if (typeof obj[k] == "Object" && obj[k] !== null) {
            keys.push(obj[k]);
            CHelpers.getKeys(<Object>obj[k]);
        } else {
            return keys;
        }
    }
}

Encountering the error "Element implicitly has an 'any' type because type 'Object' has no index signature" with obj[k]. Tried using this function in the playground, where there's no issue. However, encountering this problem specifically in Webstorm; any idea what might be causing it?

javascript json recursion typescript javascript-objects

Answer 1

Answer №1

It seems like this code snippet aligns with your requirements:

function gatherKeys(data: any) {
    let keys: string[] = [];

    for (let key in data) {
        keys.push(key);
        if (typeof data[key] == "object") {
            keys = keys.concat(gatherKeys(data[key]));
        }
    }

    return keys;
}

I made some adjustments such as adding the key (key) instead of the value (data[key]) to the array, and concatenating the recursive result into the keys array.
Furthermore, the return keys statement is now placed after the loop, rather than within the else clause.

Instead of using Object as a type, it's recommended to utilize any according to the documentation:

Instead of Object, use any. Variables of type Object only allow you to assign values but restrict method calls, even valid ones.

The code can also be simplified by employing Object.keys:

function gatherKeys(data: any) {
    let keys = Object.keys(data);
    Object.keys(data).forEach(k => {
        if (typeof data[k] === "object") {
            keys = keys.concat(gatherKeys2(data[k]));
        }
    });

    return keys;
}

Answer 2

It seems like this code snippet aligns with your requirements:

function gatherKeys(data: any) {
    let keys: string[] = [];

    for (let key in data) {
        keys.push(key);
        if (typeof data[key] == "object") {
            keys = keys.concat(gatherKeys(data[key]));
        }
    }

    return keys;
}

I made some adjustments such as adding the key (key) instead of the value (data[key]) to the array, and concatenating the recursive result into the keys array.
Furthermore, the return keys statement is now placed after the loop, rather than within the else clause.

Instead of using Object as a type, it's recommended to utilize any according to the documentation:

Instead of Object, use any. Variables of type Object only allow you to assign values but restrict method calls, even valid ones.

The code can also be simplified by employing Object.keys:

function gatherKeys(data: any) {
    let keys = Object.keys(data);
    Object.keys(data).forEach(k => {
        if (typeof data[k] === "object") {
            keys = keys.concat(gatherKeys2(data[k]));
        }
    });

    return keys;
}

I am puzzled by this error in Typescript: "Why does the element have an 'any' type when the Object type lacks an index signature?"

Answer №1

Similar questions

The function tokenNotExpired encounters an error when attempting to access the localStorage, as it

Upon page refresh, products are automatically added to the cart

Angular: issue with form validation - password matching is not functioning as expected

Refresh the browser tab's content

The error message "Unexpected node environment at this time" occurred unexpectedly

What is the reason for index.html requesting the css or js modules as if they were directories when loading?

.toggle function malfunctioning

Exploring JSON objects with nested structures using Jsonpath queries

Slideshow feature stops working after one cycle

Is it better to set the language of Puppeteer's Chromium browser or utilize Apify proxy?

Is it possible to compile using Angular sources while in Ivy's partial compilation mode?

Vue's keydown event will only fire when elements are in an active state

A method for merging the values of three text fields and submitting them to a hidden text field

What is the best way to supply JSON data to the "The Wall" MooTools plugin while feeding?

Ways to Achieve the Following with JavaScript, Cascading Style Sheets, and Hypertext

Creating a loop with resolves to navigate through states in AngularJS with ui-router requires the use of a closure

Steps to resolve the issue of being unable to destructure property temperatureData from 'undefined' or 'null' in a React application without using a class component

Is it possible to establish role-based access permissions once logged in using Angular 6?

Angular - Is there a specific type for the @HostListener event that listens for scrolling on the window?

Can someone explain why the console.log(items) command seems to be executing twice