#Astro.slots.render type for children value

4 messages · Page 1 of 1 (latest)

torn goblet
#

i am making a For component like solidjs has, but only for map elements in astro on compilation time without using any external library, so i have this situation this is my component

---
import For from '@global/component/for.astro';

const data = [ 'id: 1', 'id: 2', 'id: 3' ];
---
  <For each={data}>
    {(dataInformation, index) => <div>{dataInformation} {index}</div>}
  </For>

for component

---
type Props<T> =
{
  each: T | null | false | undefined;
};

const { each } = Astro.props;

const slots: string[] = [];

// eslint-disable-next-line promise/no-native
await Promise.all(each.map(async (element: string, index: number) =>
{
  slots.push(await Astro.slots.render('default', [ element, index ]));
}));
---
<Fragment set:html={slots} />

As you can see i user the Astro.slots.render to pass the argument to the component, but i have a problem here i know that element should have a generic type not string but even like this is the for component i have Parameter 'dataInformation' implicitly has an 'any' type here is a picture of the error, how can infer the type of this ?

image.png
cobalt ridge
#

Your code seems to run fine... the only line I had to change was:

import For from '../components/For.astro';
image.png
torn goblet
#

yes i have that error for a strict typescript

#

you have to put the strict mode of typescript to reproduce the error