#Types for named slots passed to framework components

4 messages · Page 1 of 1 (latest)

dusky pasture
#

What's the right way to do these types

const ReactComponent = ({ string }: { string: any }) => {
  return <>{string}</>;
};

export default ReactComponent;

in .astro :

---
import ReactComponent from "../ReactComponent";
---
<html lang="en">
  <head>
    ...
  </head>
  <body>
    <h1>Astro</h1>
    <ReactComponent>
      <p slot="string">hello world</p>
    </ReactComponent>
  </body>
</html>

gives TS error

Type '{ children: any; }' is not assignable to type 'IntrinsicAttributes & { string: any; }'.
  Property 'string' is missing in type '{ children: any; }' but required in type '{ string: any; }'.

https://stackblitz.com/edit/withastro-astro-aa1s82?file=src%2Fpages%2Findex.astro

dusky pasture
#

@crystal narwhal since I saw you active any chance you want to take a look at this 😅 no worries either way

crystal narwhal
#

There's no way to do it correctly right now