Repository navigation
memo breaks the typing #9
Description
Thanks for this awesome article on logrocket.
I tried wrapping my component with memo, but it breaks the typing. Can you please advise?
import {
memo, type ComponentPropsWithoutRef, type ElementType,
type PropsWithChildren
} from 'react';
type TBadgeBaseProps<T extends ElementType> = PropsWithChildren<{
as?: T;
color: 'primary' | 'gray' | 'green' | 'red' | 'yellow' | 'blue' | 'orange';
}>;
type TBadgeProps<T extends ElementType> = TBadgeBaseProps<T> &
Omit<ComponentPropsWithoutRef<T>, keyof TBadgeBaseProps<T>>;
const Badge = memo(function Badge<T extends ElementType = 'span'>({
as,
className,
color,
...rest
}: TBadgeProps<T>) {
});
const test = <Badge href="foo">Hello</Badge>;
In the const test, it's not properly saying that href is not allowed.
Activity