New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[react] Port ElementRef utility type from Flow #43201
[react] Port ElementRef utility type from Flow #43201
Conversation
2f874a4
to
6656d6f
Compare
@alloy Thank you for submitting this PR! 🔔 @johnnyreilly @bbenezech @pzavolinsky @digiguru @ericanderson @DovydasNavickas @theruther4d @guilhermehubner @ferdaber @jrakotoharisoa @pascaloliv @Hotell @franklixuefei @Jessidhia @saranshkataria @lukyth @eps1lon @zieka @dancerphil @dimitropoulos @rapmue @royxue @ZheyangSong @richbai90 @caspeco-dan @pkeuter @jrsaunde @CruseCtrl @apalugniok @RobertStigsson @kousaku-maron @iflp @veddermatic @G07cha @gndelia @eliotball @vkentta @fcaylus - please review this PR in the next few days. Be sure to explicitly select If no reviewer appears after a week, a DefinitelyTyped maintainer will review the PR instead. |
cc @TheSavior |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Do we really need this in the core typings or is this userland implementation sufficient:
// helper
type RefInstance<T> = T extends React.Ref<infer InstanceType> ? InstanceType : never;
// usage
type AnchorRef = NonNullable<React.ComponentPropsWithRef<'a'>['ref']>;
type AnchorInstance = RefInstance<AnchorRef>;
@eps1lon Like I mentioned, this is not essential to the core typings, but it does make it much simpler to port upstream typings. Thus far these are most (all?) react-native related, so I’m ok moving it there; but in principle [in upstream] this is a type re-exported from the react package. |
My main concern is that big type map. This seems solvable by the type helper I posted, no? |
@alloy The Travis CI build failed! Please review the logs for more information. Once you've pushed the fixes, the build will automatically re-run. Thanks! |
6656d6f
to
75fae5c
Compare
@eps1lon Gotcha 👍 I just got rid of it, albeit slightly different. Let me know if you still have concerns. |
75fae5c
to
de1592a
Compare
Hmm, there’s a |
This doesn't work for forwardref exotic components either. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for contributing!
@ferdaber et al, thanks for the great review! 🙏 |
@alloy The Travis CI build failed! Please review the logs for more information. Once you've pushed the fixes, the build will automatically re-run. Thanks! |
The remaining CI failure has to do with a property being removed from TS’ Perhaps this file gets updated during the release process? In any case, it’s a failure unrelated to my changes. |
Can you tag some of the maintainers for recharts for this? So we can raise the issue to them. |
Ok, found the place it was removed and tagged the maintainers there https://github.com/microsoft/TypeScript/pull/37464/files#r395692943 |
Re:
I'd recommend just dropping that property from the types, it's an IE only property which was deprecated years ago |
These have been removed from `lib.dom.d.ts`: https://github.com/microsoft/TypeScript/pull/37464/files#r395692943
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Going above and beyond 👍
This comment has been minimized.
This comment has been minimized.
Alright, this looks good 👍 |
I just published |
I just published |
Flow doc: https://flow.org/en/docs/react/types/#toc-react-elementref
In short, this utility type makes it easy to get the type a
ref
would have, given a component type. While not-essential, it will make keeping up-to-date with upstream React code simpler; or more specifically react-native.I am currently introducing it in a test for the react-native typings.