#Infer Astro slot callback function types

2 messages · Page 1 of 1 (latest)

summer axle
#

Does Astro provide a way for a component to add types to the parameters passed to Astro.slots.render so that consumers of the component have the type information available to them without needing to explicitly import the relevant types and add them to the parameters in the callback?

Docs reference: https://docs.astro.build/en/reference/astro-syntax/#astroslotsrender

Example:

---
type FooObj = { prop1: string; prop2: number };
const myObj: FooObj = { prop1: 'foo', prop2: 123 };
const fooSlot = await Astro.slots.render('foo', [myObj]);
---

<Fragment set:html={fooSlot} />
<Foo>
  <fragment slot="foo">
    {(obj) => <span><b>{obj.prop1}: </b>{obj.prop2}</span>} <!-- currently obj is typed as any, but would be nice to be inferred as FooObj -->
  </fragment>
</Foo>
solid gyro
#

Hey, I don't know if this is currently possible for it to automatically infer.

But you can cast the object with the type

// Fragment.astro
---
export type FooObj = {}
---
// Page.astro
---
import Fragment, { type FooObj } from "./Fragment.astro"
---

<Fragment>
  {
    (obj: FooObj) => (...)
  }
</Fragment>

Untested but I'd try this first