[react] Port ElementRef utility type from Flow

[alloy]

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.

[typescript-bot]

@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 Approve or Request Changes in the GitHub UI so I know what's going on.

If no reviewer appears after a week, a DefinitelyTyped maintainer will review the PR instead.

[alloy]

cc @TheSavior

[eps1lon]

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>;

[alloy]

@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.

[eps1lon]

My main concern is that big type map. This seems solvable by the type helper I posted, no?

[typescript-bot]

@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!

[alloy]

@eps1lon Gotcha 👍 I just got rid of it, albeit slightly different. Let me know if you still have concerns.

[alloy]

Hmm, there’s a typescript@next error that I don’t see how it could be related to my change: https://travis-ci.org/github/DefinitelyTyped/DefinitelyTyped/builds/664007029#L892. Previous React PR was green, though, so something must have changed since then.

[ferdaber]

This doesn't work for forwardref exotic components either.

[ferdaber]

Thanks for contributing!

[alloy]

@ferdaber et al, thanks for the great review! 🙏

[typescript-bot]

@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!

[alloy]

The remaining CI failure has to do with a property being removed from TS’ lib.dom.d.ts declaration file. At the time of writing, this is v3.9.0-dev.20200320. Weirdly enough when I check the master branch it does exist https://github.com/microsoft/TypeScript/blob/5e9c43607f8732bc94374c95fddd8b1fd9881122/lib/lib.dom.d.ts#L2907

Perhaps this file gets updated during the release process?

In any case, it’s a failure unrelated to my changes.

[ferdaber]

Can you tag some of the maintainers for recharts for this? So we can raise the issue to them.

[alloy]

Ok, found the place it was removed and tagged the maintainers there https://github.com/microsoft/TypeScript/pull/37464/files#r395692943

[orta]

Re:

ERROR: 148:99  expect  TypeScript@next compile error: 
2202Type 'PickedCSSStyleDeclarationKeys' does not satisfy the constraint 'number | "length" | "all" | "left" | "right" | "bottom" | "top" | "font" | "clipPath" | "filter" | "marker" | "mask" | "resize" | "color" | "clip" | "content" | "flex" | "grid" | ... 370 more ... | "setProperty"'.
2203  Type '"enableBackground"' is not assignable to type 'number | "length" | "all" | "left" | "right" | "bottom" | "top" | "font" | "clipPath" | "filter" | "marker" | "mask" | "resize" | "color" | "clip" | "content" | "flex" | "grid" | ... 370 more ... | "setProperty"'.
2204
2205

I'd recommend just dropping that property from the types, it's an IE only property which was deprecated years ago

[ferdaber]

Going above and beyond 👍

[orta]

Alright, this looks good 👍

[typescript-bot]

I just published @types/react@16.9.25 to npm.

[typescript-bot]

I just published @types/recharts@1.8.9 to npm.