How to create recursive type?

Question

I have elements which have sub-elements that are structured the same as their parent. When I create types of them using TypeScript, I am having some errors. How can I solve that issue?

type RowRecord = Record<string, CellData>;
type CellData = string | number | RowRecord;

Errors:

Type alias 'CellData' circularly references itself.
Type alias 'RowRecord' circularly references itself.

Example record:

{
    "id": "60f49dbb3ee1a9241749abb6",
    "gender": "female",
    "firstName": "Millicent",
    "lastName": "Harrington",
    "birthDate": "2013-05-14T04:35:49.400Z",
    "age": 8,
    "email": "[email protected]",
    "address": {
      "country": "USA",
      "state": "Utah",
      "city": "Cecilia",
      "street": "Newkirk Placez",
      "houseNumber": 969
    }
  }

Gerrit0 · Accepted Answer · 2021-12-18 17:36:35Z

7

You can do by expanding Record to the object it represents

type RowRecord = { [K in string]: CellData }; // or { [k: string]: CellData }
type CellData = string | number | RowRecord;

TypeScript doesn't allow your definition because Record<string, CellData> is eagerly evaluated. If you give TS an object type, then TypeScript recognizes that it can defer the evaluation of that type, permitting a recursive definition.

answered Dec 18, 2021 at 17:36

Gerrit0

9,3823 gold badges30 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

yurukyuruk Over a year ago

I have tried your solution and it worked. But I don't know about such "{ [k: string]: CellData }" data structure. Could you tell me what is this or recommend me any source about it?

Gerrit0 Over a year ago

[k: string] there is an index signature, [k in string] is a mapped type

Collectives™ on Stack Overflow

How to create recursive type?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related