Successive type label

Question

Successive type label

Looking to create an object that can have either primitives or objects as properties? Avoid pitfalls like the following:

const obj: DesiredType = {
  correctProp1: 'string',
  correctProp2: 123,
  correctProp3: true,
  wrongProp4: [1, 2, 3],
  prop5: {
    wrongProp1: () => {},         
    wrongProp2: [1, 2, 3],      
    correctProp3: 'other string'
  }
}

Avoid using just Record<string, any>, as it allows functions and arrays. Likewise, steer clear of structures like:

Record<string, string | number | boolean | Record<string, any>>

This setup is problematic because anything can appear on the second level.

One attempted solution involved:

type PrimitiveOrObject = string | number | boolean | Record<string, PrimitiveOrObject>; // ts(2456) type 

DesiredType = Record<string, PrimitiveOrObject>;

However, this led to error ts(2456): Type alias "PrimitiveOrObject" circularly references itself.

Is there a method to define a type alias for objects containing primitives or objects like themselves?

typescript

Answer 1

Answer №1

Using a type alias generically within the same definition is not allowed, but it can be used in object type literals instead. By introducing some indirection, you can achieve the recursion you are aiming for.

type PrimitiveOrObject =
  string | number | boolean | { [key: string]: PrimitiveOrObject };

The

{ [key: string]: PrimitiveOrObject }

syntax is known as an index signature. When using a key type of string, this is essentially equivalent to Record (refer to this question for more information), and it allows you to bypass the recursion limitation that was causing issues in your original approach.

Answer 2

Using a type alias generically within the same definition is not allowed, but it can be used in object type literals instead. By introducing some indirection, you can achieve the recursion you are aiming for.

type PrimitiveOrObject =
  string | number | boolean | { [key: string]: PrimitiveOrObject };

The

{ [key: string]: PrimitiveOrObject }

syntax is known as an index signature. When using a key type of string, this is essentially equivalent to Record (refer to this question for more information), and it allows you to bypass the recursion limitation that was causing issues in your original approach.

Answer 3

Answer №2

Adding onto Silvio's response, I'd like to emphasize that the issue is not related to indirection, object type, or index signature.

Introducing additional layers of indirection can actually exacerbate the problem:

type PrimitiveOrObject = string | number | boolean | F<PrimitiveOrObject>;
//   ~~~~~~~~~~~~~~~~~ PrimitiveOrObject circularly references itself

type F<T> = { [k: string]: T }

Similarly, combining types in certain ways can yield the same problematic behavior as with an indexed signature:

type PrimitiveOrObject = string | number | boolean | PrimitiveOrObject[];
//                                  works just fine  -------------------

In my opinion, it's helpful to think of a type alias declaration only being able to reference itself when used in conjunction with a built-in type constructor. Utility types may cause TypeScript to struggle because it lacks a universal method for determining when to cease recursive checking within the type definition. Built-in type constructors are exceptions with specific behaviors regarding recursion.

Answer 4

Adding onto Silvio's response, I'd like to emphasize that the issue is not related to indirection, object type, or index signature.

Introducing additional layers of indirection can actually exacerbate the problem:

type PrimitiveOrObject = string | number | boolean | F<PrimitiveOrObject>;
//   ~~~~~~~~~~~~~~~~~ PrimitiveOrObject circularly references itself

type F<T> = { [k: string]: T }

Similarly, combining types in certain ways can yield the same problematic behavior as with an indexed signature:

type PrimitiveOrObject = string | number | boolean | PrimitiveOrObject[];
//                                  works just fine  -------------------

In my opinion, it's helpful to think of a type alias declaration only being able to reference itself when used in conjunction with a built-in type constructor. Utility types may cause TypeScript to struggle because it lacks a universal method for determining when to cease recursive checking within the type definition. Built-in type constructors are exceptions with specific behaviors regarding recursion.

Successive type label

Answer №1

Answer №2

Similar questions

Difficulty in connecting React to Node.js with the use of axios

The model does not align with the body request, yet it is somehow still operational

What causes the app to crash in release mode when importing a TypeScript component, while no issues arise in debugging?

Utilizing a Material UI custom theme in React with Typescript: A step-by-step guide

The function 'ShouldWorkController' was expected but is not defined, receiving undefined instead

Utilize Sequelize's cascade feature within your application

What is the best way to run a scheduled task automatically using node-cron?

Implementing a conditional chaining function in TypeScript

Error: The class constructor [] must be called with the 'new' keyword when creating instances in a Vite project

Avoid accessing members in Vue 3 using TypeScript that may be unsafe

Conditional application of Angular animations is possible

Tips for addressing the error "Ensure each child in a list has a distinctive 'key' prop" in a React function using TypeScript

Restoring previous configuration in Ionic2 from the resume() lifecycle method

Determine the data type of the second element in a tuple by referencing the first element using dot notation

Using TypeScript to import a Vue 2 component into a Vue 3 application

Clicking the button fails to trigger the modal popup

the process of altering properties in vue js

The JSX Configuration in TypeScript: Comparing ReactJSX and React

Nestjs RabbitMq Microservices

A tip for transferring the value of a binding variable to a method within the template when the button is clicked