How to define a tree type in TypeScript?

Question

I wrote a tree like type as below:

type ReactNode = ReactChild | Array<ReactNode> 

but editor told me that

TS2456: type alias 'ReactNode' circularly references itself.

How to solve fix this error?

Answer 1

There's a problem with recursions in type aliases, as shortly explained in this issue :

type aliases are not like interfaces. interfaces are named types, where as type aliases are just aliases. internally as well they are treated differently, the compiler aggressively flatten types aliases to their declarations.

There's a longer discussion here: allow recursive generic type aliases .

In your case, you can do something like:

interface ReactNodeArray extends Array<ReactNode> {}

type ReactNode = ReactChild | ReactNodeArray;