Using "useImperativeHandle" in a React functional component, with automatic TypeScript typing

Example.tsx

import {forwardRef, useImperativeHandle, ForwardRefExoticComponent, RefAttributes, Ref} from "react";

export type Handle<T> = T extends ForwardRefExoticComponent<RefAttributes<infer T2>> ? T2 : never;

export const Parent = (props: {})=> {
  let childHandle: Handle<typeof Child>;
  return (
    <div onClick={()=>childHandle.SayHi()}>
      <Child name="Bob" ref={c=>childHandle = c}/>
    </div>
  );
};

export const Child = forwardRef((props: {name: string}, ref: Ref<{SayHi}>)=> {
  const {name} = props;
  // expose internal functions; what we return in the callback below is what gets sent to the "ref" callback in Parent
  useImperativeHandle(ref, () => ({ SayHi }));
  
  function SayHi() { console.log("Saying hello from: " + name); }
  
  return <div>{name}</div>;
});

Great! It works perfect, but It would be great if there are some kinds of explanation of this.

---

I found that how it works it's simply extract Ref type from forwarding component.

Great! It works perfect, but It would be great if there are some kinds of explanation of this.

I found that how it works it's simply extract Ref type from forwarding component.

That's right, this is necessary when you already have a ref inside a component but you need to insert another ref in a parent component that uses that component to retrieve some information from it

I got ts errors:
TS2339: Property 'SayHi' does not exist on type 'never'.
TS2322: Type '{ SayHi: any; } | null' is not assignable to type 'never'.   Type 'null' is not assignable to type 'never'.

@lilywang711 Are you using the latest versions of TypeScript (I'm at 3.9.6)? And are you using any non-standard TypeScript settings? (perhaps more of the "strict" options?)

For reference, this is (the trimmed version of) my tsconfig.json:

{
	"compilerOptions": {
		"module": "ES2015", // leave the imports/exports alone (webpack will convert them to "require")
		"moduleResolution": "node",
		"target": "esnext", // babel targets es2015 (ie. transpiles our code to it), so it's fine for TS to target es-next
		"lib": [
			"es5",
			"es6",
			"ESNext",
			"dom"
		],
		"jsx": "react",
		"experimentalDecorators": true,
		"allowSyntheticDefaultImports": true,
		"esModuleInterop": true,
		"alwaysStrict": true,
	}
}

@Venryx Yes you are right, when I changed 'strict' from true to false, the error disappeared, thanks!

Isn't React.ElementRef<typeof Child> doing the same as type Handle<T> = T extends ForwardRefExoticComponent<RefAttributes<infer T2>> ? T2 : never;?