Issue encountered with Typescript when attempting to generate a recursive type object

Question

Issue encountered with Typescript when attempting to generate a recursive type object

My challenge is to create a recursive style object that can handle style properties in a nested format. Despite trying various solutions from SO and Google, I'm still struggling to understand how to do this effectively.

interface Properties {
  border?: string;
  width?: string;
}

//# 1 Type attempt
type TRecursiveProperties = Properties & {
  [index: string]: TRecursiveProperties;
};

//# 2 Interface attempt
interface IRecursiveProperties extends Properties {
  [index: string]: IRecursiveProperties;
}


const test: TRecursiveProperties = {
  border: '1px solid green',
  isActive: {
    border: '2px solid red',
    '&:hover': {
      border: '3px solid blue'
    }
  }
};

I hope that the Recursive properties will serve as a fallback or a way to exclude keys from the Properties object.

The two errors I encounter are:

Type alias 'TRecursiveProperties' circularly references itself.

Property 'width' of type 'string' is not assignable to string index type 'IRecursiveProperties'

Any suggestions on how I can resolve these issues?

typescript

Answer 1

Answer №1

Trying to create a concrete type that can "special-case" certain properties and exclude them from the index signature is challenging. Unfortunately, there is currently no straightforward way to achieve this in TypeScript as it has been highlighted.

Although there isn't a specific concrete type for this scenario, you can implement a workaround by using a generic type with constraints. Instead of directly assigning a value of type RecursiveProperties, you can use

T extends VerifyRecursiveProperties<T>

. Here's how you can do it:

type VerifyRecursiveProperties<T> = Properties & { [K in Exclude<keyof T, keyof Properties>]:
  T[K] extends object ? VerifyRecursiveProperties<T[K]> : never }

You also need a helper function to infer the specific T without manual declaration:

const asRecursiveProperties = <T extends VerifyRecursiveProperties<T>>(t: T) => t;

This approach allows you to achieve your desired outcome:

const test = asRecursiveProperties({
  border: '1px solid green',
  isActive: {
    border: '2px solid red',
    '&:hover': {
      border: '3px solid blue'
    }
  }
}); // works as expected

If dealing with these constraints seems too complex, consider altering the constraint to permit the index signature to accept string | undefined or restructure your types to separate non-recursive properties from recursive ones.

Refactoring your types may make the code cleaner and more manageable. For instance, you could create a new interface like this:

interface RefactoredRecursiveProperties extends Properties {
  nested?: { [k: string]: RefactoredRecursiveProperties }
}

const test2: RefactoredRecursiveProperties = {
  border: '1px solid green',
  nested: {
    isActive: {
      border: '2px solid red',
      nested: {
        '&:hover': {
          border: '3px solid blue'
        }
      }
    }
  }
}

While this restructuring may not be ideal for every situation, it can simplify the compiler's understanding of your code. Good luck with your project!

Answer 2

Trying to create a concrete type that can "special-case" certain properties and exclude them from the index signature is challenging. Unfortunately, there is currently no straightforward way to achieve this in TypeScript as it has been highlighted.

Although there isn't a specific concrete type for this scenario, you can implement a workaround by using a generic type with constraints. Instead of directly assigning a value of type RecursiveProperties, you can use

T extends VerifyRecursiveProperties<T>

. Here's how you can do it:

type VerifyRecursiveProperties<T> = Properties & { [K in Exclude<keyof T, keyof Properties>]:
  T[K] extends object ? VerifyRecursiveProperties<T[K]> : never }

You also need a helper function to infer the specific T without manual declaration:

const asRecursiveProperties = <T extends VerifyRecursiveProperties<T>>(t: T) => t;

This approach allows you to achieve your desired outcome:

const test = asRecursiveProperties({
  border: '1px solid green',
  isActive: {
    border: '2px solid red',
    '&:hover': {
      border: '3px solid blue'
    }
  }
}); // works as expected

If dealing with these constraints seems too complex, consider altering the constraint to permit the index signature to accept string | undefined or restructure your types to separate non-recursive properties from recursive ones.

Refactoring your types may make the code cleaner and more manageable. For instance, you could create a new interface like this:

interface RefactoredRecursiveProperties extends Properties {
  nested?: { [k: string]: RefactoredRecursiveProperties }
}

const test2: RefactoredRecursiveProperties = {
  border: '1px solid green',
  nested: {
    isActive: {
      border: '2px solid red',
      nested: {
        '&:hover': {
          border: '3px solid blue'
        }
      }
    }
  }
}

While this restructuring may not be ideal for every situation, it can simplify the compiler's understanding of your code. Good luck with your project!

Answer 3

Answer №2

If I had to make a choice, it would be this approach:

interface Styles {
  width?: string;
  border?: string;
  [selector: string]: string | Properties | undefined;
}

const customStyles: Styles = {
  'width': '100px',
  ' .child': {
    'width': '200px',
    'border': '1px color blue',
    '&:hover': {
      border: '1px solid aquamarine',
    },
  },
};

To explore a similar example in TypeScript, check out the resource at and look for 'Design Pattern: Nested index signature'.

Answer 4

If I had to make a choice, it would be this approach:

interface Styles {
  width?: string;
  border?: string;
  [selector: string]: string | Properties | undefined;
}

const customStyles: Styles = {
  'width': '100px',
  ' .child': {
    'width': '200px',
    'border': '1px color blue',
    '&:hover': {
      border: '1px solid aquamarine',
    },
  },
};

To explore a similar example in TypeScript, check out the resource at and look for 'Design Pattern: Nested index signature'.

Issue encountered with Typescript when attempting to generate a recursive type object

Answer №1

Answer №2

Similar questions

Sending array data from parent to child component in Angular

What is the most effective way to utilize getStaticPaths in a dynamic manner within next.js

The concept of 'this' in TypeScript classes compared to JavaScript's scope

When using firebase serve, typescript code is not being compiled prior to initiating the server

Instructions on changing the color of a full row in the table when the value is missing within the <td> tag. The value is retrieved from an API and iterated through

Links do not open in a new tab or new window as intended

Enhancing Your React Code with Prettier, ESLint, and React

What is the best way to decouple the data layer from Next.js API routes?

The function cannot be called because the type does not have the appropriate signature for invoking. The specific type lacks compatible call signatures, as indicated

Toggle Button in Angular upon Form Changes

Sacrificing type safety versus retaining type safety

Unusual behavior when importing in Angular 2 using TypeScript

What are the steps to create a project using TypeScript and your neighborhood library?

Guide to creating a function and exporting it to a component in react with the help of typescript

Incorporate JavaScript Library into StencilJs Using TypeScript

leveraging two connected hooks

Heroku build is reporting that it cannot locate the `@types` in the package.json file

Obtain the type of a Typescript interface property by only providing the property name

Troubleshooting: Angular 2 component directive malfunctioning

calling an Angular template function