How do I get TypeScript types for the content a slot returns in React?
I am tired of treating slot content as any in my React components. Right now I destructure useContent('home-hero') and TypeScript has no idea what the fields are, so nothing is checked.
How does the SDK expose the types for what each slot returns, and how do I keep them in sync as the slots change
1 answer
The package exposes a SlotContent type parameterised by slot id and version, so you can annotate content explicitly:
import type {SlotContent} from '@croct/plug-react';
type HomeHero = SlotContent<'home-hero@1'>;To make useContent('home-hero') resolve to the right type automatically, run the CLI to generate a slots.d.ts declaration file. It reads your workspace slots and emits declarations that match their schemas, so the hooks are typed against your actual content.
Commit slots.d.ts to the repo so builds use the checked-in declarations instead of fetching the schema from the API at build time. Regenerate it after you add or change a slot, otherwise the generated declarations go stale and stop matching what the slot returns.
See typing slot content and generating the declaration file for the exact commands.