reactjs - Cómo tipar correctamente los children en React Context

En el proyecto estoy creando un Contexto de React y quiero tipar correctamente los children, desafortunadamente en codesandbox solo se acepta el tipo "any". ¿Puedes revisarlo y sugerir qué tipo debería ser? Me gustaría evitar el tipo "any".

Así es como se implementa Context.Provider

const App = () => {
  return (
    <BrowserRouter>
      <PostsContextProvider>
        <HeaderComponent />
        <ButtonsNavigation />
        <Routing />
      </PostsContextProvider>
      <DownBar />
    </BrowserRouter>
  );
};

export default App;

Y aquí está el componente Context

interface PostsContextValues {
  posts: PostType[];
}

export const PostsContext = createContext<PostsContextValues>({
  posts: []
});

export const PostsContextProvider = ({ children }: any) => {
  const value = useMemo(
    () => ({
      posts: data
    }),
    [data]
  );

  return (
    <PostsContext.Provider value={value}>{children}</PostsContext.Provider>
  );
};

¡gracias!

Respuesta #1

Puedes especificar el tipo de la propiedad children en el componente PostsContextProvider de esta manera:

export const PostsContextProvider = ({ children }: { children: React.ReactNode }) => {
  const value = useMemo(
    () => ({
      posts: data
    }),
    [data]
  );

  return (
    <PostsContext.Provider value={value}>{children}</PostsContext.Provider>
  );
};

Aquí, la propiedad children es de tipo React.ReactNode, que representa un nodo de React (por ejemplo, un elemento, texto o fragmento). Este es un tipo flexible que permite pasar cualquier tipo de hijo al componente PostsContextProvider.

Si quieres ser más específico sobre el tipo de hijos que se pueden pasar, puedes crear una interfaz o tipo que represente la forma de los hijos y usar eso en lugar de React.ReactNode. Por ejemplo:

interface PostsContextProviderProps {
  children: JSX.Element | JSX.Element[]
}

export const PostsContextProvider = ({ children }: PostsContextProviderProps) => {
  // ...
};

Esto permitiría que solo se pasen elementos JSX o un arreglo de elementos JSX como hijos del componente PostsContextProvider.