tessl install tessl/npm-types--react@19.1.0TypeScript definitions for React, the popular JavaScript library for building user interfaces
Agent Success
Agent success rate when using this tile
80%
Improvement
Agent success rate improvement when using this tile compared to baseline
1.48x
Baseline
Agent success rate without this tile
54%
{
"context": "This criteria evaluates how well the engineer uses @types/react type definitions to implement a type-safe higher-order component. The focus is on proper usage of React's ComponentType, generic typing patterns, and prop forwarding types.",
"type": "weighted_checklist",
"checklist": [
{
"name": "ComponentType usage",
"description": "Uses React.ComponentType<P> (or React.FC<P>/React.Component<P>) to type the component parameter in the withAuth function, enabling proper component typing",
"max_score": 25
},
{
"name": "Generic prop typing",
"description": "Uses generic type parameter (e.g., <P extends object>) to capture and preserve the original component's props type throughout the HOC",
"max_score": 25
},
{
"name": "Prop intersection types",
"description": "Returns a component typed as React.ComponentType<P & WithAuthProps> to properly merge the original props with the new auth props",
"max_score": 20
},
{
"name": "PropsWithChildren handling",
"description": "Properly handles children prop forwarding, using React.PropsWithChildren or explicit children typing if the wrapped component needs children",
"max_score": 10
},
{
"name": "Type-safe prop forwarding",
"description": "Forwards all original component props in a type-safe manner within the HOC implementation, typically using spread operator with proper typing",
"max_score": 15
},
{
"name": "DisplayName preservation",
"description": "Sets displayName on the returned component using the wrapped component's name or displayName property for debugging purposes",
"max_score": 5
}
]
}