Fix remove-forward-ref TypeScript output for React 19

[adamjcooper]

Fixes #336

Running this codemod before it merges

jscodeshift can run the transform file straight from a checkout of this branch:

git clone -b fix-remove-forward-ref-types https://github.com/adamjcooper/react-codemod.git /tmp/react-codemod

npx jscodeshift@latest \
  -t /tmp/react-codemod/transforms/remove-forward-ref.ts \
  --parser=tsx \
  --extensions=tsx,ts \
  path/to/your/src

--parser=tsx is required (the transform doesn't export a parser). Add jsx,js to --extensions if you have untyped files, use --dry --print to preview, and run on a clean git tree so the changes are easy to review or discard.

Problem

On TypeScript code, remove-forward-ref produces output with type errors:

1. The emitted ref prop is required and RefObject-only (ref: React.RefObject<T>). A forwardRef component's ref was optional and could also be a callback ref, so call sites that pass no ref — or a callback ref — no longer typecheck. This is the error reported in Refs required by react/19/remove-forward-ref #336.
2. Union and intersection types are dropped. Only bare type references and type literals were carried over; any other props/ref type produced an untyped destructure, making every prop an implicit any and breaking all consumers.
3. Typed ref parameters are only recognized as React.ForwardedRef<SingleReference>. Bare named imports (ForwardedRef<T>) and union element types fell back to unknown.

Fix

• Emit ref?: React.Ref<T> — optional, and accepting ref objects, callback refs, and null, matching the ref prop of ForwardRefExoticComponent.
• Accept any TS type for props and ref, parenthesizing unions and conditional types inside the emitted intersection: (A | B) & { ref?: React.Ref<T> }.
• Recognize bare named-import ref annotations (ForwardedRef<T>, Ref<T>, …) and union element types.

Example:

// before
const Tab = forwardRef<HTMLButtonElement | HTMLAnchorElement, PropsWithChildren<Props>>(
  (props, ref) => { /* ... */ }
);

// old output — annotation dropped, all props become `any`
const Tab = ({ ref, ...props }) => { /* ... */ };

// new output
const Tab = (
  {
    ref,
    ...props
  }: PropsWithChildren<Props> & {
    ref?: React.Ref<HTMLButtonElement | HTMLAnchorElement>
  }
) => { /* ... */ };

Relationship to #338 and #339

@iamakulov's PRs address parts of this issue, and this PR covers both (apologies for the overlap — happy to coordinate however is easiest to review):

• fix(remove-forward-ref): mark ref as optional in type intersections #338 makes the ref prop optional, but keeps RefObject<T>, so callback refs still error.
• fix(remove-forward-ref): preserve union and intersection types #339 preserves union/intersection props types, but without parenthesization — its union-types fixture output ButtonProps | LinkProps & { ref: ... } parses as ButtonProps | (LinkProps & { ref: ... }), attaching the ref prop to only the last union member. It also still drops union ref element types (forwardRef<HTMLButtonElement | HTMLAnchorElement, Props>).

Testing

• 4 updated + 6 new fixtures: union refs, union props, union-of-intersections, intersection props, bare ForwardedRef import, and a union inside the ref argument's annotation. All 17 tests pass; lint is clean.
• Validated on a real ~90-file production migration that previously required ~500 manual type-error fixes after running this codemod: the transform now reproduces the hand-written annotations exactly. The only remaining manual work was app code whose own signatures mention ForwardedRef (e.g. custom useForwardedRef hooks), which a call-site transform can't know about.

Notes for reviewers

• The emitted React.Ref<T> assumes the React namespace is in scope — same as the previous React.RefObject<T> output, so not a regression.
• Type imports left unused by the transform (e.g. ForwardedRef) are not pruned, as before; the ref-arg-named-import fixture documents this.

🤖 Generated with Claude Code, then manually reviewed and edited.