Is there a way to find the recursive key types in TypeScript?

Question

Is there a way to find the recursive key types in TypeScript?

Is there a method to ensure that code like this can compile while maintaining type safety?

type ComplexObject = {
  primitive1: boolean;
  complex: {
    primitive2: string;
    primitive3: boolean;
  }
};

interface MyReference {
  myKey: keyof ComplexObject;
}

const works1: MyReference = {
  myKey: "primitive1"
}

const works2: MyReference = {
  myKey: "complex"
}

const iWantThisToCompile1: MyReference = {
  myKey: "complex.primitive2" // Error: Type '"complex.primitive2"' is not assignable to type '"primitive1" | "complex"'.
}

const iWantThisToCompile2: MyReference = {
  myKey: "complex['primitive3']" // Error: Type '"complex['primitive3']"' is not assignable to type '"primitive1" | "complex"'.
}

// const iDontWantThisToCompile1: MyReference = {
//  myKey: "primitive2"
// }

// const iDontWantThisToCompile2: MyReference = {
//  myKey: "primitive3"
// }

You can experiment with this snippet here.

typescript types

Answer 1

Answer №1

In TypeScript 4.1, the new template literal types and recursive types allow for creating complex type definitions.

Property and Index Access Type

This method extends beyond a single level and reduces unnecessary type parameters in the public API.

export type RecursiveKeyOf<TObj extends object> = {
  [TKey in keyof TObj & (string | number)]:
    RecursiveKeyOfHandleValue<TObj[TKey], `${TKey}`>;
}[keyof TObj & (string | number)];

type RecursiveKeyOfInner<TObj extends object> = {
  [TKey in keyof TObj & (string | number)]:
    RecursiveKeyOfHandleValue<TObj[TKey], `['${TKey}']` | `.${TKey}`>;
}[keyof TObj & (string | number)];

type RecursiveKeyOfHandleValue<TValue, Text extends string> =
  TValue extends any[] ? Text :
  TValue extends object
    ? Text | `${Text}${RecursiveKeyOfInner<TValue>}`
    : Text;

Property Access Only Type

A simpler approach for property access:

export type RecursiveKeyOf<TObj extends object> = {
  [TKey in keyof TObj & (string | number)]:
    TObj[TKey] extends any[] ? `${TKey}` :
    TObj[TKey] extends object
      ? `${TKey}` | `${TKey}.${RecursiveKeyOf<TObj[TKey]>}`
      : `${TKey}`;
}[keyof TObj & (string | number)];

Explanation and Breakdown

export type RecursiveKeyOf<TObj extends object> = (
  (
    { [TKey in keyof TObj & (string | number)]: RecursiveKeyOfHandleValue<TObj[TKey], `${TKey}`>; }
  )[
    keyof TObj & (string | number)
  ]
);

type RecursiveKeyOfInner<TObj extends object> = {
  [TKey in keyof TObj & (string | number)]: RecursiveKeyOfHandleValue<TObj[TKey], `['${TKey}']` | `.${TKey}`>;
}[keyof TObj & (string | number)];

type RecursiveKeyOfHandleValue<TValue, Text extends string> =
  TValue extends any[] ? Text :
  TValue extends object
    ? Text | `${Text}${RecursiveKeyOfInner<TValue>}`
    : Text;

For instance:

// Input type
{
  prop: { a: string; b: number; };
  other: string;
}

// Output type
{
  prop: "prop" | "prop.a" | "prop.b";
  other: "other";
}

// Final combined type
"prop" | "prop.a" | "prop.b" | "other"

Answer 2

In TypeScript 4.1, the new template literal types and recursive types allow for creating complex type definitions.

Property and Index Access Type

This method extends beyond a single level and reduces unnecessary type parameters in the public API.

export type RecursiveKeyOf<TObj extends object> = {
  [TKey in keyof TObj & (string | number)]:
    RecursiveKeyOfHandleValue<TObj[TKey], `${TKey}`>;
}[keyof TObj & (string | number)];

type RecursiveKeyOfInner<TObj extends object> = {
  [TKey in keyof TObj & (string | number)]:
    RecursiveKeyOfHandleValue<TObj[TKey], `['${TKey}']` | `.${TKey}`>;
}[keyof TObj & (string | number)];

type RecursiveKeyOfHandleValue<TValue, Text extends string> =
  TValue extends any[] ? Text :
  TValue extends object
    ? Text | `${Text}${RecursiveKeyOfInner<TValue>}`
    : Text;

Property Access Only Type

A simpler approach for property access:

export type RecursiveKeyOf<TObj extends object> = {
  [TKey in keyof TObj & (string | number)]:
    TObj[TKey] extends any[] ? `${TKey}` :
    TObj[TKey] extends object
      ? `${TKey}` | `${TKey}.${RecursiveKeyOf<TObj[TKey]>}`
      : `${TKey}`;
}[keyof TObj & (string | number)];

Explanation and Breakdown

export type RecursiveKeyOf<TObj extends object> = (
  (
    { [TKey in keyof TObj & (string | number)]: RecursiveKeyOfHandleValue<TObj[TKey], `${TKey}`>; }
  )[
    keyof TObj & (string | number)
  ]
);

type RecursiveKeyOfInner<TObj extends object> = {
  [TKey in keyof TObj & (string | number)]: RecursiveKeyOfHandleValue<TObj[TKey], `['${TKey}']` | `.${TKey}`>;
}[keyof TObj & (string | number)];

type RecursiveKeyOfHandleValue<TValue, Text extends string> =
  TValue extends any[] ? Text :
  TValue extends object
    ? Text | `${Text}${RecursiveKeyOfInner<TValue>}`
    : Text;

For instance:

// Input type
{
  prop: { a: string; b: number; };
  other: string;
}

// Output type
{
  prop: "prop" | "prop.a" | "prop.b";
  other: "other";
}

// Final combined type
"prop" | "prop.a" | "prop.b" | "other"

Answer 3

Answer №2

Assistance was provided elsewhere, and I was presented with this variant:

type ComplexObject = {
  primitive1: boolean;
  complex: {
    primitive2: string;
    primitive3: boolean;
  }
};

type RecKeyof<T, Prefix extends string = never> =  
  T extends string | number | bigint | boolean 
  | null | undefined | ((...args: any) => any ) ? never : {
  [K in keyof T & string]: [Prefix] extends [never] 
    ? K | `['${K}']` | RecKeyof<T[K], K> 
    : `${Prefix}.${K}` | `${Prefix}['${K}']` | RecKeyof<T[K],`${Prefix}.${K}` | `${Prefix}['${K}']`;
}[keyof T & string];

interface MyReference {
  myKey: RecKeyof<ComplexObject>;
}

const works1: MyReference = {
  myKey: "primitive1"
}

const works2: MyReference = {
  myKey: "complex"
}

const iWantThisToCompile1: MyReference = {
  myKey: "complex.primitive2"
}

const iWantThisToCompile2: MyReference = {
  myKey: "complex['primitive3']"
}

// const iDontWantThisToCompile1: MyReference = {
//  myKey: "primitive2"
// }

// const iDontWantThisToCompile2: MyReference = {
//  myKey: "primitive3"
// }

You can see it working here.

Here's the type with improved documentation:

type RecKeyof<T, Prefix extends string = "" > = 
  // If T matches any of the types in the union below, we don't care about its properties.
  // We must exclude functions, otherwise we get infinite recursion 'cause functions have
  // properties that are functions: i.e. myFunc.call.call.call.call.call.call...
  T extends string | number | bigint | boolean | null | undefined | ((...args: any) => any ) 
    ? never // skip T if it matches
    // If T doesn't match, we care about its properties. We use a mapped type to rewrite
    // T.
    // If T = { foo: { bar: string } }, then this mapped type produces
    // { foo: "foo" | "foo.bar" }
    : {
      // For each property on T, we remap the value with
      [K in keyof T & string]: 
        // either the current prefix.key or a child of prefix.key.
        \`\${Prefix}\${K}\` | RecKeyof<T[K],\`\${Prefix}\${K}.\`>;
    // Once we've mapped T, we only care about the values of its properties
    // so we tell typescript to produce the union of the mapped types keys.
    // { foo: "1", bar: "2" }["foo" | "bar"] generates "1" | "2"
    }[keyof T & string];

Answer 4

Assistance was provided elsewhere, and I was presented with this variant:

type ComplexObject = {
  primitive1: boolean;
  complex: {
    primitive2: string;
    primitive3: boolean;
  }
};

type RecKeyof<T, Prefix extends string = never> =  
  T extends string | number | bigint | boolean 
  | null | undefined | ((...args: any) => any ) ? never : {
  [K in keyof T & string]: [Prefix] extends [never] 
    ? K | `['${K}']` | RecKeyof<T[K], K> 
    : `${Prefix}.${K}` | `${Prefix}['${K}']` | RecKeyof<T[K],`${Prefix}.${K}` | `${Prefix}['${K}']`;
}[keyof T & string];

interface MyReference {
  myKey: RecKeyof<ComplexObject>;
}

const works1: MyReference = {
  myKey: "primitive1"
}

const works2: MyReference = {
  myKey: "complex"
}

const iWantThisToCompile1: MyReference = {
  myKey: "complex.primitive2"
}

const iWantThisToCompile2: MyReference = {
  myKey: "complex['primitive3']"
}

// const iDontWantThisToCompile1: MyReference = {
//  myKey: "primitive2"
// }

// const iDontWantThisToCompile2: MyReference = {
//  myKey: "primitive3"
// }

You can see it working here.

Here's the type with improved documentation:

type RecKeyof<T, Prefix extends string = "" > = 
  // If T matches any of the types in the union below, we don't care about its properties.
  // We must exclude functions, otherwise we get infinite recursion 'cause functions have
  // properties that are functions: i.e. myFunc.call.call.call.call.call.call...
  T extends string | number | bigint | boolean | null | undefined | ((...args: any) => any ) 
    ? never // skip T if it matches
    // If T doesn't match, we care about its properties. We use a mapped type to rewrite
    // T.
    // If T = { foo: { bar: string } }, then this mapped type produces
    // { foo: "foo" | "foo.bar" }
    : {
      // For each property on T, we remap the value with
      [K in keyof T & string]: 
        // either the current prefix.key or a child of prefix.key.
        \`\${Prefix}\${K}\` | RecKeyof<T[K],\`\${Prefix}\${K}.\`>;
    // Once we've mapped T, we only care about the values of its properties
    // so we tell typescript to produce the union of the mapped types keys.
    // { foo: "1", bar: "2" }["foo" | "bar"] generates "1" | "2"
    }[keyof T & string];

Answer 5

Answer №3

This task can be accomplished using template literals:

type ComplexObject = {
  primitive1: boolean;
  complex: {
    primitive2: string;
    primitive3: boolean;
  }
};

type PathOf<T> =  {
  [K in keyof T]: T[K] extends object ? K | `${K}.${PathOf<T[K]>}` | `${K}['${PathOf<T[K]>}']` : K
}[keyof T]

type PathOfComplexObject = PathOf<ComplexObject>

Typescript Playground

The playground is displaying some warnings, however, if you hover over PathOfComplexObject, you can view the generated types. The message "Type instantiation is excessively deep and possibly infinite." makes sense, but I'm uncertain about:

Type 'K' is not assignable to type 'string | number | bigint | boolean | null | undefined'.

Answer 6

This task can be accomplished using template literals:

type ComplexObject = {
  primitive1: boolean;
  complex: {
    primitive2: string;
    primitive3: boolean;
  }
};

type PathOf<T> =  {
  [K in keyof T]: T[K] extends object ? K | `${K}.${PathOf<T[K]>}` | `${K}['${PathOf<T[K]>}']` : K
}[keyof T]

type PathOfComplexObject = PathOf<ComplexObject>

Typescript Playground

The playground is displaying some warnings, however, if you hover over PathOfComplexObject, you can view the generated types. The message "Type instantiation is excessively deep and possibly infinite." makes sense, but I'm uncertain about:

Type 'K' is not assignable to type 'string | number | bigint | boolean | null | undefined'.

Answer 7

Answer №4

Unfortunately, Typescript lacks the capability to do that.

Edit: TS 4.1 introduced template literals, you can refer to David Sherret's response on how to utilize them in a recursive type

The closest support it has is for a recursive array of paths:

type Cons<H, T> = T extends readonly any[] ?
    ((h: H, ...t: T) => void) extends ((...r: infer R) => void) ? R : never
    : never;
type Prev = [never, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10,
    11, 12, 13, 14, 15, 16, 17, 18, 19, 20, ...0[]]
type Paths<T, D extends number = 10> = [D] extends [never] ? never : T extends object ?
    { [K in keyof T]-?: [K] | (Paths<T[K], Prev[D]> extends infer P ?
        P extends [] ? never : Cons<K, P> : never
    ) }[keyof T]
    : [];

type ComplexObject = {
  primitive1: boolean;
  complex: {
    primitive2: string;
    primitive3: boolean;
  }
};

interface MyReference {
  myKey: Paths<ComplexObject>;
}

const works1: MyReference = {
  myKey: ["primitive1"]
}

const works2: MyReference = {
  myKey: ["complex"]
}

const iWantThisToCompile1: MyReference = {
  myKey: ["complex", "primitive2"]
}

const iWantThisToCompile2: MyReference = {
  myKey: ["complex", "primitive3"]
}

Libraries like lodash's get can handle both your "complex.primitive2" notation and an array of paths like

["complex", "primitive2"]

. While this may not be exactly what you were looking for, it offers a more type-safe alternative.

Although not an exact match, the Paths type alias came from this answer: TypeScript type definition for an object property path

Answer 8

Unfortunately, Typescript lacks the capability to do that.

Edit: TS 4.1 introduced template literals, you can refer to David Sherret's response on how to utilize them in a recursive type

The closest support it has is for a recursive array of paths:

type Cons<H, T> = T extends readonly any[] ?
    ((h: H, ...t: T) => void) extends ((...r: infer R) => void) ? R : never
    : never;
type Prev = [never, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10,
    11, 12, 13, 14, 15, 16, 17, 18, 19, 20, ...0[]]
type Paths<T, D extends number = 10> = [D] extends [never] ? never : T extends object ?
    { [K in keyof T]-?: [K] | (Paths<T[K], Prev[D]> extends infer P ?
        P extends [] ? never : Cons<K, P> : never
    ) }[keyof T]
    : [];

type ComplexObject = {
  primitive1: boolean;
  complex: {
    primitive2: string;
    primitive3: boolean;
  }
};

interface MyReference {
  myKey: Paths<ComplexObject>;
}

const works1: MyReference = {
  myKey: ["primitive1"]
}

const works2: MyReference = {
  myKey: ["complex"]
}

const iWantThisToCompile1: MyReference = {
  myKey: ["complex", "primitive2"]
}

const iWantThisToCompile2: MyReference = {
  myKey: ["complex", "primitive3"]
}

Libraries like lodash's get can handle both your "complex.primitive2" notation and an array of paths like

["complex", "primitive2"]

. While this may not be exactly what you were looking for, it offers a more type-safe alternative.

Although not an exact match, the Paths type alias came from this answer: TypeScript type definition for an object property path

Is there a way to find the recursive key types in TypeScript?

Answer №1

Property and Index Access Type

Property Access Only Type

Explanation and Breakdown

Answer №2

Answer №3

Answer №4

Similar questions

What is preventing absolute paths from functioning properly in TurboRepo?

The error message "Declaration file for module 'mime' not found" was issued when trying to pnpm firebase app

Preselecting items in PrimeNG Checkbox: A step-by-step guide

`Achieving efficient keyboard navigation with MUI Autocomplete and SimpleBar integration in React``

Exploring the File Selection Dialog in Node.js with TypeScript

Is there a way to verify if a React hook can be executed without triggering any console errors?

The references to the differential loading script in index.html vary between running ng serve versus ng build

Apply CSS styles conditionally to an Angular component

Typescript's default string types offer a versatile approach to defining string values

Create an array that can contain a mix of nested arrays and objects

Can the Date class be expanded by overloading the constructor method?

Retrieve properly formatted text from the editor.document using the VSCode API

Building a dynamic hierarchical list in Angular 8 with recursive expansion and collapse functionality

Transform JSON reply in JavaScript/Typescript/Angular

Storing information using the DateRangePicker feature from rsuite - a step-by-step guide

Customizing form validation in React using Zod resolver for optional fields

Tips for receiving an array input in a GraphQL resolver

What is the proper way to utilize RxJS to append a new property to every object within an array that is returned as an Observable?

tips for resolving pm2 issue in cluster mode when using ts-node

Using Next.JS useRouter to access a dynamic route will result in receiving an empty object as the return value