Skip to content

Improve typing of forwardRef#3144

Merged
JoviDeCroock merged 2 commits intopreactjs:masterfrom
cmlenz:master
May 11, 2021
Merged

Improve typing of forwardRef#3144
JoviDeCroock merged 2 commits intopreactjs:masterfrom
cmlenz:master

Conversation

@cmlenz
Copy link
Copy Markdown
Contributor

@cmlenz cmlenz commented May 10, 2021

The specified ref type is now included in the typing of the functional component returned by forwardRef.

This is similar to the corresponding React typings, which currently look like this:

function forwardRef<T, P = {}>(
  render: ForwardRefRenderFunction<T, P>
): ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;

@coveralls
Copy link
Copy Markdown

coveralls commented May 10, 2021

Coverage Status

Coverage remained the same at 99.622% when pulling 10574f4 on cmlenz:master into 528f7ce on preactjs:master.

The specified ref type is now included in the typing of the functional component
returned by `forwardRef`.
Copy link
Copy Markdown
Member

@JoviDeCroock JoviDeCroock left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good spot!

@JoviDeCroock JoviDeCroock merged commit 977a2d4 into preactjs:master May 11, 2021
@brookback
Copy link
Copy Markdown

Heads up that this change was a breaking change for me. I had to override this locally with

-): preact.FunctionalComponent<Omit<P, 'ref'> & { ref?: preact.RefObject<R> }>;
+): preact.FunctionalComponent<Omit<P, 'ref'> & { ref?: preact.Ref<R> }>;

@cmlenz
Copy link
Copy Markdown
Contributor Author

cmlenz commented Jul 13, 2021

Yeah, sorry, there's PR #3214 with a fix.

@brookback
Copy link
Copy Markdown

Cool, thanks!

Also note that you don't need Omit<P, 'ref'> in there. The & operator is enough.

const fn = <P = {}>(p: P & {ref?: number}) => console.log(p.ref);

// Won't compile
// fn({
//    ref: 'foo',
// });

fn({
    ref: 1,
});

fn({});

Source

This caused some problems in my codebase, so I replaced it with:

+): preact.FunctionalComponent<Omit<P, 'ref'> & { ref?: preact.Ref<R> }>;
-): preact.FunctionalComponent<P & { ref?: preact.Ref<R> }>;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants