Recursive types losing types

[ChristoRibeiro]

Hi everyone,

I'm trying to represent some HTML tags and the div can contain children tags, but div loses its type and becomes any.

Any idea how to make it work?

📝 The snippet:

const div = z.object({ _tag: z.literal("div"), id: z.string(), children: z.lazy(() => z.array(tag)) })
const h1 = z.object({ _tag: z.literal("h1"), id: z.string() })
const h2 = z.object({ _tag: z.literal("h2"), id: z.string() })
const h3 = z.object({ _tag: z.literal("h3"), id: z.string() })

type Tag = z.infer<typeof tag>
const tag = z.lazy(() => z.union([div, h1, h2, h3]))

😬 The errors:

on const div and const tag:

'div' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.ts(7022)

'tag' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.ts(7022)