pressing buttons on user interfaces nested two levels deep

There is a 3rd party library (which cannot be altered) with the following interface:

interface MyInterface {
    x: {
        a: 1,
        b: 2,
        c: 3,
    },
    y: {
        d: 4,
        e: 5,
        f: 6,
    },
    z: {
        g: 7,
        h: 8,
        i: 9,
    },
}

I aim to define a type (Values2ndDepth) that represents a combination of all keys from all objects in the interface. This ensures that the following rules are applied:

let key: Values2ndDepth<MyInterface>;
key = 'a'; // valid
key = 'i'; // valid
key = 'j'; // error - as it does not exist in the above.

Below are some attempts I made:

type Values2ndDepth<T extends object> = keyof T[keyof T];
type Values2ndDepth<T extends object> = T extends {[k: string]: (infer R)} ? keyof R : never;
type Values2ndDepth<T extends object> = T extends Record<string, infer R> ? keyof R : never;
type Values2ndDepth<T extends object, K extends keyof T = keyof T> = T[K] extends object ? keyof T[K] : never;

Answer №1

Finally, I stumbled upon a resolution!

type NestedValues<T extends object, K extends keyof T = keyof T> =
    K extends keyof T ? T[K] extends object ? keyof T[K] : never : never;
  • Ensuring that K represents keys of T
  • Verifying that the value of T[K] is an object
  • Retrieving keys from T[K]

Are there any alternate approaches? Possibly something more refined?

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

An issue occurred with npm resulting in exit code 2. The error is as follows: Command was unsuccessful: node_modules/.bin/vsce package --no

Here is the specific error displayed in cmd: TS1323: Dynamic imports are only supported when the '--module' flag is set to 'es2020', 'esnext', 'commonjs', 'amd', 'system', or 'umd'. E ...

The proper method for specifying contextType in NexusJS when integrating with NextJS

I am currently facing a challenge while trying to integrate Prisma and Nexus into NextJS. The issue arises when I attempt to define the contextType in the GraphQL schema. Here is how I have defined the schema: export const schema = makeSchema({ types: [ ...

Encountering issues with retrieving application setting variables from Azure App Service in a ReactJS TypeScript application resulting in '

My dilemma lies in my app setup which involves a Node.js runtime stack serving a ReactJs Typescript application. I have set some API URLs in the application settings, and attempted to access them in ReactJs components using process.env.REACT_APP_URL, only ...

How can I create interfaces for deeply nested objects in TypeScript?

Check out my current JSON data below: { "state_1": { "date": [ { 1000: { "size": 3, "count": 0 } }, { 1001: { "size" ...

What steps can I take to avoid conflicts between behavior subjects when making next() calls?

I am facing an issue with a BehaviorSubject variable named saveToLocalStorage. In one of my methods, the next() method is called twice, but only one of the calls is being completed while the other one gets overwritten. The service subscribed to these calls ...

Designing a web application with Angular2

As a newcomer to Angular2, I have recently started working on creating a simple hello world application. I have come across the concept of Modules and Components in Angular2. My main source of confusion lies in how to properly design an Angular2 applicat ...

What is the method to transfer the outcome of a GET request into a POST request?

My task involves sending a GET request to retrieve information from . When the request is made, it generates a random image and returns a JSON object that includes details such as "fileSizeBytes" and "url". My goal is to extract the "url" value and then ...

There appears to be an issue with the compilation of the TypeScript "import { myVar }" syntax in a Node/CommonJS/ES5 application

In my Node application, I have a configuration file that exports some settings as an object like this: // config.js export var config = { serverPort: 8080 } Within another module, I import these settings and try to access the serverPort property: // ...

What is the method for accessing an anonymous function within a JavaScript Object?

Currently facing an issue with a Node.js package called Telegraf, which is a bot framework. The problem arises when trying to create typings for it in TypeScript. The package exports the following: module.exports = Object.assign(Telegraf, { Composer, ...

Remove Image Upload feature in antDesign and remove item from interface

I am currently working on a project that involves multiple interfaces. One of these interfaces is specifically designed for uploading images. However, I encountered a problem with the deletion icon functionality. Whenever the icon is clicked, a modal is su ...

What is the best way to troubleshoot a quasar typescript file type error?

Currently, I am delving into Quasar using TypeScript and encountering a type error while working on file uploads. Here is the snippet of my code where the type error arises specifically in the parameter of the form.append() method. The error message read ...

What is the best way to access data in a node.js application from IONIC typescript via a REST API?

Here is the structure of my service.ts: import { Injectable } from '@angular/core'; import {Http, Headers} from '@angular/http'; import 'rxjs/add/operator/map'; /* Generated class for the PeopleSearch provider. See http ...

Receiving notifications upon deleting a record

Below is my code snippet that deletes a record from a table. async deleteTodo(id: number) { this.todosRepository.delete(id); } I am trying to figure out how to handle messages during the deletion process. For instance, if a user provides an identifi ...

What is the process for configuring NextJS to recognize and handle multiple dynamic routes?

Utilizing NextJS for dynamic page creation, I have a file called [video].tsx This file generates dynamic pages with the following code: const Video = (props) => { const router = useRouter() const { video } = router.query const videoData = GeneralVi ...

Executing a TypeScript function directly in HTML without the need for a click event

I understand how to trigger a TypeScript function when clicking a button, but how can I initiate a function without relying on a specific event? My goal is to call a function once an array named chartData has been populated. Here is the code snippet I have ...

What could be causing the Toast message to not show up in react-native-root-toast?

Incorporated react-native-root-toast into my expo project running on expo 51. Please see the code snippet below for reference: const toastColors = { 'error': { color: '#DA5C53', iconName: <WarningIcon size="5 ...

Include html into typescript using webpack

Attempting to include HTML content into a variable using TypeScript and webpack has been my challenge. This is the current setup: package.json: { "devDependencies": { "awesome-typescript-loader": "^3.2.3", "html-loader": "^0.5.1", "ts-load ...

How can you run a function in JavaScript or TypeScript that is stored as a string?

Is there a way to call a function that is stored as a string? For example: var dynamicFun = `function Hello(person) { return 'Hello' + person; }` In this case, the dynamicFun variable can store any function definition dynamically, such as: var ...

What is the process of importing an IIFE-based JavaScript module into an Angular TypeScript application?

I have come across a third-party SDK that is structured as an oldschool IIFE based module. The code looks something like this: var ThirdPartySDK = (function() { var export = {}; // Adding some methods to export return export; })(); To use this SD ...

Guide on populating text boxes in a form automatically using ngFor?

As a beginner Angular developer, I am looking to automatically fill in text boxes in a form, specifically 10 text boxes (10 rows) using the ngFor directive. In my research on ngFor examples, I have noticed that most of them focus on populating a list base ...