javascript / expert
Snippet
Typsichere Higher Order Components (HOC)
Die Verwendung von TypeScript-Generics (P extends object) in HOCs stellt sicher, dass die umhüllte Komponente ihre Prop-Definitionen beibehält, während neue Funktionen ohne Typ-Erosion hinzugefügt werden.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
interface WithLoadingProps {isLoading: boolean;}function withLoading<P extends object>(Component: React.ComponentType<P>) {return function WappedComponent({ isLoading, ...props }: P & WithLoadingProps) {if (isLoading) return <Spinner />;return <Component {...(props as P)} />;};}
react
Erklärung
1
withLoading<P extends object>(Component: React.ComponentType<P>)
Verwendet ein Generic P, um die ursprünglichen Props der übergebenen Komponente darzustellen.
2
P & WithLoadingProps
Kombiniert die ursprünglichen Props mit der neuen 'isLoading'-Prop mittels Intersection-Type.