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-6/

{
  "context": "This evaluation assesses the engineer's ability to properly use React's prop utility types (PropsWithChildren and ComponentProps) to create type-safe component wrappers. The focus is on correct usage of these specific utility types from @types/react.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "PropsWithChildren usage",
      "description": "Card component props interface uses PropsWithChildren<T> or PropsWithChildren utility type to properly type the children prop",
      "max_score": 25
    },
    {
      "name": "Card variant typing",
      "description": "Card component props are correctly typed with variant as optional union type of 'default' | 'bordered' and padding as optional union type of 'small' | 'medium' | 'large'",
      "max_score": 15
    },
    {
      "name": "ComponentProps usage",
      "description": "ButtonWrapper uses ComponentProps<'button'> or ComponentPropsWithoutRef<'button'> to extract and inherit all native button element props",
      "max_score": 30
    },
    {
      "name": "Icon prop extension",
      "description": "ButtonWrapper extends the button props with an additional optional icon prop of type string, demonstrating proper type intersection or interface extension",
      "max_score": 15
    },
    {
      "name": "Props forwarding",
      "description": "ButtonWrapper properly forwards/spreads all inherited button props to the underlying button element",
      "max_score": 10
    },
    {
      "name": "Type safety",
      "description": "Both components maintain full type safety with no use of 'any' type, and props are correctly typed in function signatures",
      "max_score": 5
    }
  ]
}

Install with Tessl CLI

npx tessl i tessl/npm-types--react

tile.json