Changing the properties of nested objects with varying data types in a loop

Is there a method to iterate through all the values of nested objects in Typescript when the nested objects have different types (a and b below) without using any? I attempted the following

const obj = {
    a: {
        foo: 123,
        bar: 456
    },
    b: {
        gg: 789
    }
}

let key: keyof typeof obj
for (key in obj) {
    const subobj = obj[key];
    let subkey: keyof typeof subobj;
    for (subkey in subobj) {
        subobj[subkey] = 100;
    }
}

however, the typechecker indicates that both subkey and subobj are inferred as never

The left-hand side of a 'for...in' statement must be of type 'string' or 'any'
let subkey: never
Type 'number' is not assignable to type 'never'.
const subobj: {
    foo: number;
    bar: number;
} | {
    gg: number;
}

Answer №1

To meet your specific needs, there are a couple of approaches you could take:

Here's a code snippet to demonstrate:

type Obj = {[subobj: string]: {[subkey:string]: number}}

// obj is now typed
const obj: Obj = {
    a: {
        foo: 123,
        bar: 456
    },
    b: {
        gg: 789
    }
}


// This should work fine now
let key: keyof typeof obj
for (key in obj) {
    const subobj = obj[key];
    let subkey: keyof typeof subobj;
    for (subkey in subobj) {
        subobj[subkey] = 100;
    }
}

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

Ways to change the background color of cells with spaces in HTML to black

https://i.sstatic.net/rmtR1.png How can I change the cells that have a space or any separator to be black in color? This snippet shows my HTML code: <table > <thead class="table table-bordered table-responsive"> ...

Incorrect types being identified

What is the reason behind the callback assuming the type string | number | boolean instead of determining the exact type based on the property passed as the first argument in the carWithListener.on function? const car = { paint: "red", ...

When attempting to select dates from the picker options, the array is found to be devoid of any entries

My challenge lies in working with an array of dates retrieved from the server to determine which dates should be disabled on the datepicker. getStaffAvailability(){ let x = this; this.$http.get(this.weeklyAvailabilityUrl + "GetAv ...

Error message occurs during compilation of basic Vue file in Webpack

When I execute webpack watch in the VS2017 task runner, it displays the following error: ERROR in ./wwwroot/js/src/App.vue Module build failed: SyntaxError: Unexpected token { at exports.runInThisContext (vm.js:53:16) at Module._compile (module.js:373:25) ...

Issue encountered in NestJS with Prisma: When trying to invoke the class constructor t without using 'new', an error occurs stating that it

I've been attempting to establish a Prisma client within my NestJS application, but I keep encountering this persistent error: [Nest] 14352 - 12.05.2023, 23:21:13 ERROR [ExceptionHandler] Class constructor t cannot be invoked without 'new&apos ...

Tips for troubleshooting a TypeScript create-react-app in Visual Studio Code

Instructions to replicate the issue: Place a breakpoint in any .tsx file execute my npm script "start": "react-scripts start", commence debugging with F5 or by choosing a configuration from the Run and Debug window in vscode. ...

Migration of old AngularJS to TypeScript in require.js does not recognize import statements

I am looking to transition my aging AngularJS application from JavaScript to TypeScript. To load the necessary components, I am currently utilizing require.js. In order to maintain compatibility with scripts that do not use require.js, I have opted for usi ...

Changing querySelector() result to a booleandataType

How can I extract the content of an HTML meta tag in Typescript within a React component? <meta name="accepted-cookies" content="false" /> I have attempted to retrieve the value as a boolean using this code: const metaValue = (do ...

import component dynamically from object in Next.js

Currently, I have a collection of components that I am aiming to dynamically import using next/dynamic. I'm curious if this is achievable. Here's the object in interest: // IconComponents.tsx import { Tick, Star } from 'components ...

Discovering different types of navigation in React Navigation using navigationRef

I'm currently working on adding types to my TypeScript version of this function, but I'm facing some difficulties with it. Perusing the React Navigation documentation: // RootNavigation.js import { createNavigationContainerRef } from '@rea ...

Encountering an error while attempting to modify the state of an array of objects in a React Typescript

Recently delving into Typescript, I encountered an issue while attempting to insert a new object into the array within React state. The error message reads as follows: Type '{ name: string; address: string; }[] | null' is not an array type.ts(246 ...

What is the best way to apply wildcard filtering to a MatTableDataSource?

I found inspiration in the Table with filtering example on Angular Material's website, which can be accessed at https://material.angular.io/components/table/examples My goal is to enable users to search using wildcards. For instance, I want to use a ...

Tips for evaluating the stickiness of a block within a cell when it adheres to a mat-header-cell

I am working with an Angular table and facing an issue. How can I make the span element in the cells of the first column stick to the sticky mat-header-row when scrolling down the table? My requirement is for the span element to stay attached to the lower ...

Troubleshooting the issue with the AWS CodeBuild SAM esbuild integration not functioning

I currently have a Lambda's API Gateway repository in CodeCommit that I successfully build using esbuild with CLI (SAM BUILD and then SAM DEPLOY). Now, I am looking to streamline the building process by integrating it with CodePipeline. I started exp ...

What situations call for the use of 'import * as' in TypeScript?

Attempting to construct a cognitive framework for understanding the functionality of import * as Blah. Take, for instance: import * as StackTrace from 'stacktrace-js'; How does this operation function and in what scenarios should we utilize imp ...

Is there a way to address the sporadic behavior of rxjs combineLatest when used in conjunction with ReplaySubject

My current struggle lies within this particular example: const r1 = new ReplaySubject(2); const r2 = new ReplaySubject(2); r1.next('r1.1'); r1.next('r1.2'); r2.next('r2.1'); combineLatest([r1, r2]).subscribe(console.log); // ...

To set up the store in configureStore, you must provide one type argument for the 'MakeStore' generic type

Encountering an issue with MakeStore showing a Generic type error 'MakeStore' requires 1 type argument(s) .ts(2314) Here is the code from configureStore.ts: import { configureStore, EnhancedStore, getDefaultMiddleware, } from '@reduxj ...

Slideshow through each item using Typescript and Angular8

I came across a solution in this carousel on by one link, but I'm struggling to work with the jQuery code even though I have JQuery installed in my project. For example: const next = jQuery(this).next(); I am looking to convert the JQuery code from ...

Encountering difficulties while utilizing Ramda in typescript with compose

When attempting to utilize Ramda with TypeScript, I encountered a type problem, particularly when using compose. Here are the required dependencies: "devDependencies": { "@types/ramda": "^0.25.21", "typescript": "^2.8.1", }, "dependencies": { "ramda ...

Dealing with enum values in Jest tests when using Prisma can be tricky. The error message "Group[] not assignable to

Here is an example of my prisma postgresql schema: model User { id Int @id @default(autoincrement()) uuid String @db.Uuid createdat DateTime @default(now()) @db.Timestamp(6) updatedat DateTime @updatedAt first ...