Using keyof to access properties of an object type in TypeScript

Question

Using keyof to access properties of an object type in TypeScript

I have a complex nested object structure defined by keys, which can be illustrated as follows:

const DATA = {
    INFO1: {
        details: {
            detail1: { value: "x" },
        },
    },
    INFO2: {
        details: {
            detail2: { value: "y" },
        },
    },
} as const;

My goal is to devise a generic type that allows me to extract the values of specific properties within a given object - for example:

type DetailsForObject<INFO_KEY extends keyof typeof DATA> = {
    [DETAIL_NAME in keyof typeof DATA[INFO_KEY]["details"]]: typeof DATA[INFO_KEY]["details"][DETAIL_NAME]["value"];
};

However, I am encountering an error stating:

Type '"value"' cannot be used to index type 
'{ readonly INFO1: { readonly details: { readonly detail1: { readonly value: "x"; }; }; }; 
readonly INFO2: { readonly details: { readonly detail2: { readonly value: "y"; }; }; }; }[INFO_KEY]["details"][DETAIL_NAME]'.

Is it possible to access each object's properties using indexing, considering that they share identical property shapes? Although I could coerce it into an interface, I prefer to maintain strict typing for the values.

typescript types

Answer 1

Answer №1

Maybe there's a bug or design limitation in TypeScript where the compiler fails to recognize that the generic object will have a literal key. The issue lies with the inferred constraint on

typeof OBJECTS[K]["properties"][P]

. Check out microsoft/TypeScript#21760 for more details (and perhaps give it a thumbs up if you'd like to see it addressed, although it seems unlikely since it's been inactive for over two years as of May 2020).

One approach to addressing this is to generalize the type function (rather than using typeof OBJECTS, utilize a generic type T specifically constrained to the structure we're accessing) and then specialize it to typeof OBJECTS:

type GenericPropertiesForObject<
    T extends Record<K, { properties: { [k: string]: { value: any } } }>,
    K extends PropertyKey
    > = {
        [P in keyof T[K]["properties"]]: T[K]["properties"][P]["value"]
    };

type PropertiesForObject<K extends keyof typeof OBJECTS> =
    GenericPropertiesForObject<typeof OBJECTS, K>;

This should compile without errors, despite performing essentially the same computation. Let's confirm:

type O1Props = PropertiesForObject<'OBJECT1'>;
// type O1Props = { readonly prop1: "a"; }

type O2Props = PropertiesForObject<'OBJECT2'>;
// type O2Props = { readonly prop2: "b"; }

Everything seems in order. Best of luck with your project!

Link to Playground for code experimentation

Answer 2

Maybe there's a bug or design limitation in TypeScript where the compiler fails to recognize that the generic object will have a literal key. The issue lies with the inferred constraint on

typeof OBJECTS[K]["properties"][P]

. Check out microsoft/TypeScript#21760 for more details (and perhaps give it a thumbs up if you'd like to see it addressed, although it seems unlikely since it's been inactive for over two years as of May 2020).

One approach to addressing this is to generalize the type function (rather than using typeof OBJECTS, utilize a generic type T specifically constrained to the structure we're accessing) and then specialize it to typeof OBJECTS:

type GenericPropertiesForObject<
    T extends Record<K, { properties: { [k: string]: { value: any } } }>,
    K extends PropertyKey
    > = {
        [P in keyof T[K]["properties"]]: T[K]["properties"][P]["value"]
    };

type PropertiesForObject<K extends keyof typeof OBJECTS> =
    GenericPropertiesForObject<typeof OBJECTS, K>;

This should compile without errors, despite performing essentially the same computation. Let's confirm:

type O1Props = PropertiesForObject<'OBJECT1'>;
// type O1Props = { readonly prop1: "a"; }

type O2Props = PropertiesForObject<'OBJECT2'>;
// type O2Props = { readonly prop2: "b"; }

Everything seems in order. Best of luck with your project!

Link to Playground for code experimentation

Using keyof to access properties of an object type in TypeScript

Answer №1

Similar questions

When using my recursive type on Window or Element, I encounter a type instantiation error stating "Type instantiation is excessively deep and possibly infinite.ts"

I am interested in utilizing Vue Fallthrough attributes, but I specifically want them to be applied only to the input elements within the component and not on the container itself

Inputting data types as arguments into a personalized hook

Exploring the concepts of TypeScript interface inheritance and the powerful capabilities of generics in type inference

Guide to creating a Unit Test for an Angular Component with a TemplateRef as an Input

Steps to automatically make jest mocked functions throw an error:

Running 'ionic serve' is successful, but encountering building errors

Acquire Binance account balances through NextJS, ccxt library, and TypeScript integration

The parameter type 'typeof LogoAvatar' cannot be assigned to the argument type 'ComponentType<LogoProps & Partial<WithTheme>'

How can I prevent buttons from being created using ngFor in Angular?

A comprehensive guide on utilizing the loading.tsx file in Next JS

Error: The function res.blob is not a valid function

Error: Angular - encountering undefined response when making HTTP request

storing data in a nested child object within an array

Angular2 - Error: The view has been destroyed and cannot be updated: detectChanges

What's the best way to make a toast notification appear when an API call is either successful or encounters

Choosing the initial choice with ngFor: A step-by-step guide

Enhance Vuetify functionality using TypeScript for custom components

Experiencing the issue of receiving unexpected commas following a div

Tips for utilizing import alongside require in Javascript/Typescript