CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-types--react

TypeScript definitions for React, the popular JavaScript library for building user interfaces

80

1.48x
Overview
Eval results
Files

rubric.jsonevals/scenario-1/

{
  "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
    }
  ]
}

Install with Tessl CLI

npx tessl i tessl/npm-types--react

tile.json