Discovering the various value types within a double-nested object in TypeScript

My query has similarities to Types from both keys and values of object in Typescript, however, I am adding another level of nesting:

interface Outer {
  a: {
    b: number
  },
  c: {
    d: string
  }
}

I am specifically interested in obtaining the union type of all values, which in this case is number | string.

This is what I have come up with so far:

type Values<T extends Record<string, any>> = T[keyof T]; // Extracting value types

type InnerValues<
  T extends Record<string, Record<string, any>>,
  K extends keyof T
> = T[K][keyof T[K]];

type All = Values<Outer>;
type In = InnerValues<Outer, keyof Outer>; // expected number|string

However, I encountered an error stating that Outer does not have an index type.

Playground link.

Answer №1

T[K][keyof T[K]] won't function as expected because T[K] will form a union of all potential values in T (specifically the values defined by K) and keyof T[K] might ultimately result in never if there are no common keys among the values.

To address this issue, each element in the union T[K] needs to be evaluated for its possible values. This can be achieved using a distributive conditional type

interface Outer {
  a: {
    b: number;
  };
  c: {
    d: string;
  };
}

type DistributiveValues<T extends Record<string, any>> = T extends T ? T[keyof T] : never;

type InnerValues<
  T extends Record<keyof T, object>,
  K extends keyof T
> = DistributiveValues<T[K]>;

type In = InnerValues<Outer, keyof Outer>; // results in number|string

play

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 preventing keyboard events from being inherited by all pages in the stack in Ionic framework

In my Ionic 3 app, I have a specific page called Page1 that requires customized keyboard handling. Here is how I implemented it on Page1: @Component({ ... host: { '(document:keydown)': 'handleKeyboardEvents($event)' } }) expo ...

Simplify typing in TypeScript using default generic parameters

Imagine I came across the following object: const inquiries = { whoCreatesIssues: { options: { sameTeam: { id: 'SAME_TEAM' }, management: { id: 'MANAGEMENT' ...

Angular: Trigger service call upon onBlur event of input changes

In Angular, I am looking to detect any changes in the text input during the onBlur event and then take specific actions accordingly: Criteria for processing during the onBlur event: Only proceed if there has been a change in the text input. If the input ...

Angular Material (8) error code S2591: The variable 'require' is not defined in the current scope

Currently, I am attempting to record the date and time in the JavaScript console. Despite the code successfully logging the dates, an error message persists: Note: The code is functioning properly, with the dates being displayed in the console. It is only ...

In TypeScript, what is the return Type of sequelize.define()?

After hearing great things about TypeScript and its benefits of static typing, I decided to give it a try. I wanted to test it out by creating a simple web API with sequelize, but I'm struggling to understand the types returned from sequelize. Here ar ...

Implementing error wrapper in typescript to handle failing promises with n retries

I have a wrapper function that calls an async function: function fetchAPI(arg1: number, arg2: number, arg3: string) { return new Promise((resolve, reject) => { try { myFetchFunction(arg1, arg2, arg3).then((r: any) => { if (!r) { ...

The synergy between JSDoc and type mapping

I am in search of a comprehensive and reliable source that provides detailed information on how TypeScript's JSDoc interacts with types, their mappings, and modifications. It is widely known that Pick and Omit maintain the original JSDoc: const any: ...

New behavior in Vue 3: defineEmits is causing issues with defineProps data

Currently, I am working with Vue 3 and TS 4.4. In one of my components, I am using defineProps to define prop types. However, when I try to add defineEmits, VS Code starts indicating that my props variable is not recognized in the component template. Below ...

How can I make Cesium, SystemJS, and Angular2 compatible with each other?

Could anyone provide a working example of using SystemJS (not Webpack) with Angular2 (in TypeScript, not Dart) and Cesium (npm)? I came across a blog post on cesiumjs' site that discusses this: The author mentioned, "You can't simply do a requi ...

Synchronization problem encountered in an Angular app involving playwright

Currently, I am working on automating a process where the service queries the database and displays the data on the user interface. However, the rendering takes a considerable amount of time, around 3 minutes. Despite using Playwright for automation, it do ...

Choosing custom element children once they're connected to the DOM: A guide

My goal is to retrieve the value of transaction-name__inputbox when the user clicks on the transaction-add__button. The function transactionAddHandler is triggered upon clicking the button. However, my attempt to select this element using document.querySe ...

"What could be causing my React application to enter a never-ending re-rendering cycle when I incorporate

Currently, I'm working on a code to update the content of a previous post with image URLs received from the server. However, I'm facing issues with excessive re-renders due to my coding approach. Specifically, when converting the image URLs into ...

Utilizing markModified inside a mongoose class that does not inherit from mongoose.Document

In my Typescript code using mongoose ODM, I am implementing a simple queue structure. The challenge arises when directly mutating an array instead of assigning a new value to it because mongoose doesn't automatically recognize the change. To resolve t ...

Issues have arisen with the ReactNative Jest snapshot test, resulting in a

I decided to incorporate TypeScript into my react-native project. I came across this helpful article and followed the instructions step by step. However, when I ran yarn test, I encountered an error that I'm unsure how to resolve: FAIL Components/__ ...

Limit an object to only contain interface properties

Suppose we have the following object: o {a : 1, b : 2} and this interface defined as: interface MyInterface { a : number } We are now looking to create a new object that represents the "intersection" of o and the MyInterface: o2 : {a : 1} The mai ...

`How to utilize the spread operator in Angular 4 to push an object to a specific length`

One issue I'm facing is trying to push an object onto a specific index position in an array, but it's getting pushed to the end of the array instead. this.tradingPartner = new TradingPartnerModel(); this.tradingPartners = [...this.tradingPartner ...

How do React Native proxies differ from vanilla React proxies in their functionality?

Trying to retrieve data from an API running locally on port 5000 of my device, I recalled setting the proxy in package.json when working on React web applications: "proxy": "https://localhost:5000" Attempting to fetch information f ...

Dealing with arrays in Typescript and flattening them using the RX

Struggling with a problem involving RXJS transformation in an Ionic 2 application. My goal is to flatten a JSON file into objects, here is the simplified JSON structure: [{ "language": "it", "labels": { "name": "Hi", }, "t ...

"Learn the process of extracting information from a database and exporting it to a CSV file with Angular 2

Currently, I am facing an issue where I need to retrieve data from a database and export it to a CSV file. While I am able to fetch all the data successfully, I am encountering difficulty when trying to fetch data that is in object format as it shows up as ...

Encountering a JavaScript/TypeScript issue that reads "Unable to access property 'Items' as it is undefined"

I encountered an issue with Javascript where I'm receiving an error message stating "Cannot read property 'Items' of undefined". The this keyword is consistently showing as undefined in the Base class. How can this problem be resolved? Coul ...