Definitelytyped: [@types/react] useRef 반환 유형이 ref prop 유형과 충돌합니다.

편집 2: 내 솔루션을 무시하고 아래 솔루션을 사용하세요. :)

나는 현재 같은 문제가 있습니다. 혹시 이미 해결책을 찾았습니까?

편집 : 나는 지금 이것을 사용하고 있습니다. 분명히 그렇게 예쁘지는 않습니다. 해결책 :

const inputField = React.useRef() as React.MutableRefObject<HTMLInputElement>;

여기에서 찾을 수 있습니다: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/28884#issuecomment -471341041

약간 깔끔한 해결책은 useRef 함수 호출에서 initialValue를 null로 설정하는 것입니다.

const componentRef = useRef<HTMLDivElement>(null);

이것은 componentRef = HTMLDivElement | null 을 보장합니다. 이는 HTMLDivElement | undefined 보다는 ref 소품이 기대하는 것입니다.

@shane935 님 오늘도 수고하셨습니다 🙌🏻

다음과 같이 undefined 를 RefObject<T>.current 에 추가해야 합니다.

//index.ts, line 80
interface RefObject<T> {
   readonly current: T | null;
}

그래서 읽는다

//index.ts, line 80
interface RefObject<T> {
   readonly current: T | null | undefined;
}

버그가 아니라 합법적인 입력 오류를 잡는 것입니다.

자세한 내용은 https://github.com/DefinitelyTyped/DefinitelyTyped/pull/38228#issuecomment -529749802를 참조하세요.

@Jessidhia 가 말했듯이 버그가 아닙니다. 아마도 다음과 같이 작성해야 할 것입니다.

import React, {
  forwardRef,
  ForwardRefRenderFunction,
  useImperativeHandle,
  useRef,
  PropsWithChildren,
} from "react";

interface Props {}
interface Ref {
  value: string;
  setValue: (value: string) => void;
}

const InputEmail: ForwardRefRenderFunction<Ref, PropsWithChildren<Props>> = (
  props,
  ref
) => {
  // hooks
  const inputElement = useRef<HTMLInputElement | null>(null);
  useImperativeHandle(ref, () => {
    return {
      value: inputElement.current ? inputElement.current.value : "",
      setValue: (value: string) => {
        inputElement.current && (inputElement.current.value = value);
      },
    };
  });

  // render
  return (
    <div>
      <input
        type="text"
        ref={inputElement}
        defaultValue="[email protected]"
        disabled
      />
    </div>
  );
};

const Component = forwardRef(InputEmail);

export default Component;

이것이 모든 사람의 문제를 해결할 수 있을지 확신할 수 없으며 이 문제에 대한 전문가도 아니지만 내가 ref로 전달한 내용과 ref를 전달한 구성 요소의 실제 ref 유형을 살펴본 후 , 인터페이스가 잘못된 것 같았습니다.

처음에는 수신 구성 요소에 대해 다음과 같은 소품 인터페이스가 있었습니다.

type TextboxProps = CustomProps & React.HTMLProps<HTMLInputElement>

내가 변경한 것:

type TextboxProps = CustomProps & React.HTMLAttributes<HTMLInputElement>

그런 다음 입력 오류가 사라졌습니다.

나보다 더 많이 아는 척 하지는 않겠지만 HTMLProps 인터페이스와 React.forwardRef() 함수 유형의 유형을 살펴보면 RefAttributes를 사용하고 있음을 알 수 있습니다.. 바로 위에 ClassAttributes를 볼 수 있습니다.HTMLProps를 입력하십시오.확장 중이며 그 중 LegacyRef를 정의합니다.내 타이핑 문제를 일으킨 것으로 생각되는 유형.

이 프로젝트에는 useRef() 에 대해 3개의 오버로드가 있는 것 같습니다. 3개가 모두 필요합니까? useRef<T>(null) 케이스는 개발자가 가장 많이 사용하는 케이스인 것 같습니다.

    function useRef<T>(initialValue: T): MutableRefObject<T>;
    function useRef<T>(initialValue: T|null): RefObject<T>;
    function useRef<T = undefined>(): MutableRefObject<T | undefined>;

1. 두 가지 변경 가능한 오버로드의 예상 사용 사례는 무엇입니까?
2. 사용자가 "올바른" 과부하를 더 쉽게 찾을 수 있도록 지원하는 다른 방법이 있습니까?

RefObject 이 있습니다.

ref 소품으로 Panel 구성 요소에 전달합니다.

w/ forwardRef 소비하려고 하면 MutableRefObject 됩니다.

이제 .current 속성을 사용할 수 없습니다.

@Jessidhia @osf2e 귀하의 제안은 여기에 해당되지 않는 것 같습니다.

내가 의지해야 하는 해결 방법:

        if (ref && (ref as RefObject<HTMLDivElement>).current) {
              // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
              (ref as RefObject<
                HTMLDivElement
              >)!.current!.style.height = `${containerHeight}px`;
            }

react-native-web을 사용하여 사용해야했습니다.

import {RefObject} from 'react';
// ...
const myRef = useRef() as RefObject<View>

Input 요소에 대한 Ref에 이 문제가 있었습니다.
그래서 useRef<HTMLDivElement>() -> useRef<HTMLInputElement>() 에서 전환했는데 정상적으로 작동했습니다.

@joshribakoff 매개변수를 직접 입력할 수도 있습니다.

export const Panel = React.forwardRef((props: PanelProps, ref: React.RefObject<HTMLDivElement>) => {

그렇게 하면 ref에 액세스할 때 typecast할 필요가 없습니다.
근데 왜 이걸 해야하는지 아직도 이해가 안감...