Typescript에서 React forwardRef 타입 에러

Typescript + React에서 Component에 forwardRef를 씌울려고 했는데...

Argument of type '({ mediaStream }: VideoProps, ref: RefObject) => Element' is not assignable to parameter of type 'ForwardRefRenderFunction<HTMLVideoElement, VideoProps>'.
Types of parameters 'ref' and 'ref' are incompatible.
Type 'ForwardedRef' is not assignable to type 'RefObject'.
Type 'null' is not assignable to type 'RefObject'.ts(2345)

이런 에러가 forwardRef쪽에 떴다...

해결방법

ref 타입을 RefObject<HTMLblabla> 가 아니고 ForwardedRef<HTMLblabla> 로 바꿔주어야한다

참고로 ForwardedRef 타입은 ((instance: T | null) => void) | MutableRefObject<T | null> | null 이다

즉 함수 또는 MutableRefObject 또는 null 이라는 뜻이다.
그러므로 ref.current 로 접근 할 때는 MutableRefObject 만 접근이 가능하므로 typeof ref === 'function' 이나 ref === null 로 분기처리를 해줘야 한다.

코드 전문

interface VideoProps {
  mediaStream: MediaStream | undefined;
}

function Video({ mediaStream }: VideoProps, ref: ForwardedRef<HTMLVideoElement>) {

  return (
    <video ref={ref} width="640" height="360" autoPlay></video>
  );
}

export default forwardRef<HTMLVideoElement, VideoProps>(Video);

출처

https://stackoverflow.com/questions/73015696/whats-the-difference-between-reacts-forwardedref-and-refobject