Dealing with implicit `any` when looping through keys of nested objects

Here is a simplified example of the issue I am facing:

const testCase = {a:{b:"result"}}

for (const i in testCase) {
    console.log("i", i)
    for (const j in testCase[i]){
        console.log("j", j)
    }
}

Encountering this error:

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

5     for (const j in testCase[i]){
                   

To overcome this, I have been casting i as a keyof typeof testCase.

const testCase = {a:{b:"result"}}

for (const i in testCase) {
    let typedIndex = i as keyof typeof testCase
    console.log("i", i)
    for (const j in testCase[typedIndex]){
        console.log("j", j)
    }
}

Is there a more efficient way to handle this issue, or am I deviating towards an anti-pattern by not defining a specific structure for testCase?

Answer №1

After some investigation, it appears that unless I explicitly define the keys of testCase, they default to type any. To clarify this, I can refactor using an interface like so:

interface TestCase {
    [prop:string]: {
        [prop:string]: string
    }
}
const testCase:TestCase = {a:{b:"result"}}

By implementing this change, when I iterate over my object with a for...in loop, the type of the returned key will be known.

Below is the refined version of the code:

interface TestCase {
    [prop:string]: {
        [prop:string]: string
    }
}
const testCase:TestCase = {a:{b:"result"}}

for (const i in testCase) {
    console.log("i", i)
    for (const j in testCase[i]){
        console.log("j", j)
    }
}

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

Tips for sending just the updated section of the form

I am working with a form group where I map the values from the form to an object type in order to make a request to edit the item. This is my form structure: public companyForm = new FormGroup( { generalInfo: new FormGroup({ name: new ...

Having trouble with Typescript subtraction yielding unexpected results?

If I have a total amount including VAT and want to separate the net price and the VAT value, how can this be done? For example, if the final price is $80.60 with a VAT rate of 24%, what would be the net price and the VAT value? The correct answer should ...

What is the method for incorporating a customized button into the header of a Dynamic Dialog using PrimeNG?

I'm currently working on a project using Angular v17 and PrimeNG. I need to add buttons to the header of a dynamic dialog, but I've been struggling to find a solution. Here's the code snippet from my dialog component: show(j): void { ...

What could be causing the errors in my subscription function?

Working on an e-commerce website, I encountered errors in the "cartservice" specifically in the "checkoutFromCart()" function. The console displayed the following error: src/app/services/cart.service.ts:218:81 218 this.http.post(${this.serverUrl}ord ...

Nodemailer fails to display an error message when the email is not successfully sent

I am currently working on implementing nodemailer for sending emails. However, I noticed that if the email address in the "to" field is incorrect, the email is not sent as expected. The issue is that there is no error displayed and the function still resol ...

Transforming Uint8Array into BigInt using Javascript

I've come across 3 different ways to convert a Uint8Array to BigInt, but each method seems to produce varying results. Can someone clarify which approach is correct and recommended? Utilizing the bigint-conversion library. The function bigintConversi ...

Unexpected artifacts are being introduced to the build folder by the compiler

Currently, I am following the steps outlined in this Getting Started guide to set up the installation of tsoa. According to their instructions, I have created a routes.ts folder and placed it under /build: /build /routes.ts Next, in /src/app.tsx, I mak ...

What is the reason that TypeScript cannot replace a method of the base class with a subtype?

Here's a straightforward example. type Callback<T> = (sender: T) => void; class Warehouse<T> { private callbacks: Callback<T>[]; public constructor(callbacks: Callback<T>[]) { this.callbacks = callbacks; ...

The import component functions correctly when it is located in the app folder, but does not work when it is installed as

I have a situation with an angular 2 component. When I place it in app-name/src/app/component-folder/component.ts and import it as import {Component} from './component-folder/component', everything works perfectly fine. However, if I install the ...

What steps should I take to resolve the error message "ESLint encountered an issue determining the plugin '@typescript-eslint' uniquely"?

Struggling to enable eslint linting in an ASP.NET Core MVC project that incorporates React.js and typescript? I'm facing a tough challenge trying to resolve the error mentioned above. In my setup, I'm using Visual Studio 2022 Community Edition 1 ...

Only one choice for discriminated unions in react props

Looking to create a typescript type for react component props, specifically a basic button that can accept either an icon prop or a text prop, but not both. My initial attempt with a discriminated union didn't quite produce the desired outcome: inter ...

The latest update of WebStorm in 2016.3 has brought to light an error related to the experimental support for decorators, which may undergo changes in forthcoming

Hello, I recently updated to the latest WebStorm version and encountered this error message: Error:(52, 14) TS1219:Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' ...

Integrating HTTP JSON responses into HTML using Ionic 2, Angular 2, TypeScript, and PHP: A comprehensive guide

Currently in the midst of developing my first Ionic 2 app, however, my understanding of typescript is still limited.. I aim to execute the authenticate() method within my constructor and then to: Retrieve the entire JSON response into the textarea and/o ...

Oops! A mistake was made by passing an incorrect argument to a color function. Make sure to provide a string representation of a color as the argument next time

Encountering an issue with a button react component utilizing the opacify function from the Polished Library The styling is done using styled-components along with a theme passed through ThemeProvider. Upon testing the code, an error is thrown. Also, the ...

What is the best way to transform a Storybook typescript meta declaration into MDX format?

My typescript story file is working fine for a component, but new business requirements call for additional README style documentation. To meet this need, I am trying to convert the .ts story into an .mdx story. However, I am facing challenges in adding de ...

Unable to grab hold of specific child element within parent DOM element

Important Note: Due to the complexity of the issue, the code has been abstracted for better readability Consider a parent component structure like this: <child-component></child-component> <button (click)="doSomeClick()"> Do Some Click ...

Problem with execution of TypeScript function from HTML

I have been facing an issue where I am attempting to click a button on an HTML page to trigger a TypeScript function called `getToken()`. Strangely, the function does not seem to get executed when the button is clicked. Surprisingly, I have tested the `get ...

The current version of NPM - typescript is 2.2.2, and we are unable to update it to 2.4.1 due to it being a symlink

While attempting to install TypeScript through NPM, I encountered the error below. Can you help me identify the issue? Command: npm install typescript Error: The installation of TypeScript failed because it requires an update from version 2.2.2 to 2.4. ...

Utilizing TypeScript for enhanced Chrome notifications

I am currently developing a Chrome app using TypeScript (Angular2) and I want to implement push notifications. Here is the code snippet for my notification service: import {Injectable} from 'angular2/core'; @Injectable() export class Notificati ...

How to implement ngx-spinner in an Angular http subscribe operation

I'm trying to incorporate a spinner into my Angular Application using ngx-spinner. I've come across this library but haven't found enough practical examples on how to use it effectively. Specifically, I want to integrate the spinner with my ...