Recursively typing an object in Typescript - is it possible?

Is it possible for TypeScript to recursively infer the type of an object's keys and its children's keys? Consider the following scenario:

const o:A<X> = {
  a:'1',
  b: {
    c: '2'
  }
}

If we define A so that X is "a"|"b"|"c", TypeScript can currently only infer the first layer (i.e. X = "a"|"b") using keyof. How can we make TypeScript infer the key types of the grandchildren nodes as well?

Answer №1

Here is a suggestion for you:

define A<T extends string|number> = {
  [key in T]?: string | A<T>
}

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

The parameters 'event' and 'event' are not compatible with each other

I'm currently working on a page that involves submitting a form: import React from 'react'; import Form from 'react-bootstrap/Form'; import { useSignIn } from '../../hooks/Auth/useSignIn'; import { useHistory } from &apos ...

Managing asynchronous data retrieval using rxjs

Within my service, I use an Observable to load data in the constructor. Later on, this data can be accessed using a getter, which should either return the data immediately if it's available or wait until the loading process is complete. Here is an exa ...

Swapping out a class or method throughout an entire TypeScript project

Currently, I am working on a software project built with TypeScript. This project relies on several third-party libraries that are imported through the package.json file. One such library includes a utility class, utilized by other classes within the same ...

Error: Model attribute missing in Adonis JS v5 relationship

Recently, I started diving into the Adonis framework (v5) and decided to build a todo list api as part of my learning process. However, I'm facing an issue concerning the relationship between the User and Todo entities. Let me show you the models fo ...

Can a type be established that references a type parameter from a different line?

Exploring the Promise type with an illustration: interface Promise<T> { then<TResult1 = T, TResult2 = never>( onfulfilled?: | ((value: T) => TResult1 | PromiseLike<TResult1>) | undefined | null, onrejected?: ...

Error encountered when attempting to pass i18next instance to I18nextProvider

Issue: Error message: Type 'Promise' is missing certain properties from type 'i18n': t, init, loadResources, use, and more.ts(2740) index.d.ts(344, 3): The expected type is derived from the property 'i18n' declared within ty ...

Aurelia's navigation feature adds "?id=5" to the URL instead of "/5"

I have set up my Aurelia Router in app.ts using the configureRouter function like this: configureRouter(config, router: Router) { config.map([ { route: ['users', 'users/:userId?'], na ...

Utilizing TypeScript with dc.js for enhanced data visualization capabilities

I've encountered an issue with types while working with dc.js version 4.2.7. To address this, I went ahead and installed what I believe to be the standard types module for dc.js using the following command: Command I used for Installation npm i @type ...

Modify the standard localStorage format

I'm encountering a dilemma with my two applications, located at mysite.com/app1 and mysite.com/app2. Both of these apps utilize similar localStorage keys, which are stored directly under the domain "mysite.com" in browsers. This setup results in the l ...

Joining various asynchronous HTTP calls is recommended

Upon initialization, I make 4 HTTP requests for data. After that, I need to load the data from the server to fill the forms based on the data model of the last 4 HTTP calls. In simpler terms, I need to subscribe to these 4 HTTP calls and ensure they do no ...

Combining ReactJS event handling for onClick and onKeyDown into a single handler for TypeScript

To ensure accessibility compliance, I am incorporating onKeyPress handlers into my application. However, I am facing a challenge with interactive <div /> elements. Here are the event handlers I want to trigger on click: const handleViewInfoClick = ( ...

Concealed Dropdown Option

<div fxFlex="25" fxFlex.xs="100" class="px-8"> <div class="form-label">Reporting Status <span class="reqSgnColor">*</span> </div> <mat-form-field appearance=&quo ...

Retrieve the calling method's context within an exported function

In my codebase, there exists a file called utils which houses various utility functions that are utilized by different classes and components. Currently, there is a test-utils class designed specifically for karma unit tests to perform common tasks. One ...

Tips for transforming a JSON array retrieved from a REST API into a usable object

Upon receiving a message from my backend, it appears as follows: [ [ { "id": 1, "date": "2018-12-31" }, { "id": 12, "standard": null, "capacity": 7, "descr ...

Is it normal for the Array of Observables to be empty upon initial page load, only to contain content later

Currently, I am working on integrating ngx-infinite-scroll functionality. My goal is to extract the initial 5 posts from my "posts" array and populate them into the "shownPosts" array at the beginning. Subsequently, as the user continues scrolling down, I ...

The module version discrepancies are apparent between the contents of yarn.lock and package.json

I discovered the contents of my yarn.lock file are as follows: "@aws-sdk/client-dynamodb@^3.42.0": version "3.145.0" resolved "https://registry.yarnpkg.com/@aws-sdk/client-dynamodb/-/client-dynamodb-3.145.0.tgz#2a358e9cbb117637 ...

next.js users may encounter a problem with react-table not rendering correctly

Encountering difficulties while attempting to integrate a basic table function into my upcoming application. Despite being a sample output, the function fails to load into the index for some unknown reason! // Layouts import Layout from "../components ...

Executing secure journey within TypeScript

Just came across an enlightening article on Medium by Gidi Meir Morris titled Utilizing ES6's Proxy for secure Object property access. The concept is intriguing and I decided to implement it in my Typescript project for handling optional nested object ...

Angular Route Authorities is a powerful tool for managing permissions

In my routes, I have a specific path: {path: 'Demands/:id', component: EditDemandesComponent}. This path allows me to edit demands. However, I've noticed that if the ID does not belong to one of my demands, I am still able to access the path ...

Is it feasible in Angular2 to add CSS to a component using a service?

I have a component named A containing 5 images. Out of the 5, only one image is in color and clickable, while the remaining 4 are greyed out using the CSS class below: .not_opened{ -webkit-filter: grayscale(85%); } The greyscale images are not clickabl ...