react-codemod icon indicating copy to clipboard operation
react-codemod copied to clipboard

fix(remove-forward-ref): mark ref as optional in type intersections

Open iamakulov opened this issue 5 months ago • 0 comments

The codemod now generates type & { ref?: RefType } instead of type & { ref: RefType } to correctly reflect that refs are optional.

Otherwise, code like this:

const VolumeIcon = React.forwardRef<
    React.ElementRef<typeof Svg>,
    React.ComponentPropsWithRef<typeof Svg>
>(({ width = "20", height = "20", ...props }, ref) => { ... }

<VolumeIcon /> // ← works

gets code-modded into code like this:

const VolumeIcon = ({
    ref,
    width = "20",
    height = "20",
    ...props
}: React.ComponentPropsWithRef<typeof Svg> & {
    ref: React.RefObject<React.ElementRef<typeof Svg>>;
}) => { ... }

<VolumeIcon /> // ← fails with `Property 'ref' is missing in type '{}' but required in type '{ ref: RefObject<SVGSVGElement>; }'`

and requires manual fixing.

iamakulov avatar Aug 19 '25 01:08 iamakulov