Obtain keys from an object implemented with an interface in TypeScript

Is it possible to retrieve the actual keys of an object when utilizing an interface to define the object?

For example:

interface IPerson {
    name: string;
}
interface IAddress {
    [key: string]: IPerson;
}

const personInAddressObj: IAddress= {
    someAddress1: {
        name: 'John',
    },
    someAddress2: {
        name: 'Jacob',
    }
} as const

type Keys = keyof typeof personInAddressObj;

I would like the type Keys to represent the values "someAddress1 | someAddress2". While I can easily extract the keys when the interface is removed from "personInAddressObj", it seems more challenging to access the actual keys of the object when an interface is involved.

Answer №1

There's a feature request related to this particular use case on GitHub.

In your specific scenario, it seems possible to leverage the new satisfies operator introduced in TypeScript 4.9. This allows for utilizing both a `const` assertion and type checking together:

interface IPerson {
    name: string;
}

interface IAddress {
    [key: string]: IPerson;
}

const personInAddressObj = {
    someAddress1: {
        name: 'John'
    },
    someAddress2: {
        name: 'Jacob'
    }
} as const satisfies IAddress;

type Keys = keyof typeof personInAddressObj;
// ↑ inferred as "someAddress1" | "someAddress2"

Check out the live demo here

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

Customizing translations for various domains in Vue-i18n

Our app has a global reach and our company is undergoing a rebranding process in certain markets. For instance, we are currently known as "Acme Company" in the U.S. and Canada, but now we aim to be recognized as "Acme Company" in the U.S. and "Foo Company ...

displaying information in table cells with jquery

Is there a way to display a table inside a td element with an on-click function without showing all tables in the same column when the function is triggered? I want the table to be shown only for the specific td that was clicked. $(document).ready(funct ...

Vue.js - computed property not rendering in repeated list

It seems like the issue lies in the timing rather than being related to asynchronous operations. I'm currently iterating through an object and displaying a list of items. One of the values requires calculation using a method. While the direct values ...

Switching visual representation that appears upon clicking the dropdown menu

Issue with Duplicating Dropdown and Image Change const image = document.querySelector('.item__img'); const checkbox = document.querySelectorAll('.imgOption'); function handleChange() { let imgsrc = this.getAttribute("data-value ...

problems with using array.concat()

I am attempting to reverse a stream of data using a recursive call to concatenate a return array. The instructions for this problem are as follows: The incoming data needs to be reversed in segments that are 8 bits long. This means that the order of thes ...

Adjusting Spacing Between Characters

I've been looking for a way to convert regular characters (ABC) to full-width characters (ABC), but I haven't had any luck so far. That's why I'm turning to you guys for help. Currently, I don't have any JavaScript code writt ...

Error Styling: Using CSS to Highlight Invalid Checkboxes within a Group

Is there a way to create a bordered red box around checkboxes that are required but not selected? Here is the code I currently have: <div class="fb-checkbox-group form-group field-checkbox-group-1500575975893"> <label for="checkbox-group-15005 ...

Using AngularJS ng-model to select options in a dropdown menu with WebDriver

In the following code snippet, an AngularJS based dropdown menu is implemented: <select _ngcontent-c1="" class="form-control ng-pristine ng-valid ng-touched"> After opening the list, I attempted to select a variable from this list using the code be ...

What methods are available for altering state in Server Actions in NextJS 13?

Struggling to Implement State Change in NextJS 13 Server Actions I have encountered a challenge with altering state within the execution of server actions in NextJS 13. The scenario involves an actions.ts file located at the root of the app directory. Cur ...

Encountering a Keycloak Sign In Issue with NextAuth in a Next.js Application [next-auth][error][SIGNIN_OAUTH_ERROR]

Hey there, I'm currently in the process of setting up authentication for my Next.js application using NextAuth and Keycloak. Even though I've followed the documentation closely, I've hit a roadblock when trying to sign in with Keycloak. Her ...

Attempting to transfer elements from an iteration into a separate array

Currently, I am attempting to insert an associative array into an object that is empty. However, I keep encountering the following error message: An undefined property '#<Object>' cannot be read Here is the code snippet that I am testing: ...

Tips for alternating the color of <li> or <tr> elements consecutively

Looking to alternate the background color of li or tr elements consecutively. Please note: A static class will not work as I need to call this in a while loop. The desired output should look like: <li>line1</li> //white background <li> ...

Is there a way to utilize the reset() function within an input form?

Is there a way to automatically reset the textbox when submitting a value? Below is my code: <!DOCTYPE html> <html> <body> <ul id="myList"> </ul> <input type="text" id="myText" value="&q ...

Unexpected behavior with async pipe - variable becomes undefined upon reassignment

In my development process, I have implemented 2 components. One is responsible for fetching data from an external service, while the other one displays this data. The constructor of the first component is structured as follows: constructor( private dev ...

Verify if the current day falls within the range of Monday to Sunday using Node.js

Currently developing a food delivery app similar to foodpanda. Encountering an issue where a restaurant's operating days are from Monday to Friday, and I need to prevent users from placing orders on Saturdays and Sundays (or any other specified servic ...

The deletion by index feature seems to be malfunctioning in Angular

Is there a way to delete an item by its ID instead of just deleting the last element using this code? I want to create input fields with a delete button next to each one simultaneously. TS: public inputs: boolean[] = []; public addNew(): void { this ...

Mongoose encountering an issue with undefined properties (specifically 'prototype') and cannot read them

I am currently using Mongoose 7.0.1 on Next JS 13.2.2 and React 18.2.0. After tirelessly searching for a solution to my problem, I am still struggling with connecting to a MongoDB. Every time I try to import mongoose into my project for the connection, an ...

Is there a more efficient way to consolidate multiple functions like this into one cohesive function instead of having to define each one separately?

After attempting to implement a loop without success, I also considered using regex but that did not work either. The code in question is part of a larger project that involves dynamically adding and deleting fields using jQuery. The classes and ids used f ...

Preparing my JSON data for visualization on a chart

I have successfully retrieved data using this API, but now I need to transform it into a chart within my react project. As a newcomer to JS and React, I am struggling to create a chart with the JSON data. My objective is to display prices by bedrooms over ...

Synchronizing jQuery parameters

I have developed a JavaScript shopping basket where the total sum updates automatically when a quantity is selected. However, I encountered an issue where the total value does not update when a product is removed unless the page is refreshed. Here's ...