Estoy tratando de pasar el tipo de interfaz a un objeto que devuelve componentes jsx, pero no quiero especificar explícitamente el tipo para cada componente. Cómo puedo hacer esto.
->>>
interface blockProps { children: any; } const block: blockProps = { h1: ({ children }: any) => ( <h1 className="my-3 text-6xl font-bold md:text-8xl md:my-4">{children}</h1> ), h2: ({ children }: any) => ( <h2 className="my-3 text-5xl font-bold md:text-7xl md:my-4">{children}</h2> ), h3: ({ children }: any) => ( <h3 className="my-3 text-4xl font-bold md:text-6xl md:my-4">{children}</h3> ), h4: ({ children }: any) => ( <h4 className="my-3 text-3xl font-bold md:text-5xl md:my-4">{children}</h4> ), blockquote: ({ children }: any) => ( <blockquote className="relative p-4 my-8 text-xl italic border-l-4 bg-neutral-100 text-neutral-600 border-neutral-500"> <p>{children}</p> </blockquote> ), };Puede definir sus tipos de esta manera:
type possibleTags = 'h1' | 'h2' | 'h3' | 'h4' | 'blockquote'; interface blockProps { children: any; } type blockMap = { [key in possibleTags]: (props: blockProps) => React.ReactElement<any, any>; };Me divertí un poco y aquí :): https://stackblitz.com/edit/react-ts-xj27j6?file=index.tsx
interface Blocks { [key: string]: (props: { children: ReactNode }) => JSX.Element } const block: Blocks = { // ... }