TypeScript brings type safety to React components, catching errors at compile time and providing excellent IDE support. Here are the best practices we follow in Things components:

Use `forwardRef` for Refs: When components need to forward refs, we use `React.forwardRef` to maintain type safety:

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, ...props }, ref) => (
    <button ref={ref} className={cn(...)} {...props} />
  )
)

Extend HTML Attributes: Instead of creating new prop types from scratch, we extend native HTML attributes:

type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
  variant?: 'default' | 'outline'
}

Use Type Aliases for Empty Interfaces: When an interface only extends another type without adding properties, we use type aliases instead:

// Good
type CardProps = React.HTMLAttributes<HTMLDivElement>

// Avoid
interface CardProps extends React.HTMLAttributes<HTMLDivElement> {}

Avoid `any` Types: We never use `any`. Instead, we use `unknown` and type guards, or we create proper types for everything.

Context Types: When creating React contexts, we always define proper types for the context value:

interface MyContextValue {
  value: string
  setValue: (value: string) => void
}

By following these practices, we ensure that Things components provide excellent TypeScript support, catching errors early and providing great developer experience.