Definitelytyped: [@types/react] RefObject.current는 더 이상 읽기 전용이 아니어야 합니다.

PR에 감사드립니다! 한줄바꾸기 정말 쉬울꺼에요 😊

@페르다베르 ,
안녕하세요, 저는 이 문제를 선택하는 것을 좋아합니다. 제가 타이프스크립트를 처음 사용하기 때문에(단 1주일) 오픈 소스에 대한 첫 번째 기여가 될 것입니다.

node_modules/@types/react/index.d.ts를 살펴보았고 61번 줄에 현재를 읽기 전용으로 선언하는 다음 코드가 있습니다.

interface RefObject<T> {
        readonly current: T | null;
    }

이것이 문제라면 내가 해결할 수 있습니다. 제 첫 PR을 안내해 주시겠습니까?
시간 내 주셔서 감사합니다 :)

예, 해당 줄에서 readonly 수정자를 제거하는 것입니다.

React.useRef 는 current 속성이 readonly 가 아닌 $ MutableRefObject $를 반환합니다. 문제는 ref 개체 유형을 통합해야 하는지 여부입니다.

그것들은 통합되어야 합니다. React 런타임은 React.createRef() current 속성에 제한이 없습니다. 객체 자체는 봉인되지만 고정되지는 않습니다.

그렇지 않다. 고정되지 않은 경우에도 올바른 사용을 보장하기 위해 의도적으로 읽기 전용으로 남겨둡니다. null을 할당할 수 있음을 명시적으로 나타내지 않고 null로 초기화된 참조는 React에서 관리하려는 참조로 해석됩니다. 즉, React는 현재를 "소유"하고 보고 있는 것입니다.

null 값으로 시작하는 변경 가능한 ref 개체를 원하면 일반 인수에도 | null 를 지정해야 합니다. React가 아닌 "소유"하기 때문에 변경 가능합니다.

이전에 포인터 기반 언어로 자주 작업했고 소유권이 _매우_ 중요하기 때문에 아마도 이것이 이해하기 더 쉬울 것입니다. 그리고 그것이 refs, 포인터인 것입니다. .current 는 포인터를 역참조하고 있습니다.

공평합니다. ref 소품으로 전달되지 않으면 React에서 관리하지 않기 때문에 포인터를 생성하기 위해 도우미 함수로 React.createRef() 를 사용했지만 다음과 같이 할 수 있습니다. 동일한 구조로 간단한 포인터 객체를 생성합니다.

동일한 오버로드 논리를 갖도록 createRef 를 수정할 수 있지만 인수가 없기 때문에 조건부 유형 반환이 있어야 합니다. | null 를 포함하면 MutableRefObject 를 반환하고, 포함하지 않으면 (불변) RefObject 가 됩니다.

하지만 strictNullTypes 가 활성화되어 있지 않은 사람들에게 효과가 있습니까?

🤔

strictNullTypes 가 활성화된 _do_에 대해 잘못된 코드를 작성하기가 정말 쉬워야 합니까?

이 문제를 만들 때 이미 | null 과부하가 있다는 것을 깨닫지 못했습니다. 흔하지 않은 패턴이라 이런게 있을 줄은 몰랐네요. 문서에서 어떻게 놓쳤는지 모르겠지만 매우 잘 문서화되고 설명되어 있습니다. useRef 와 createRef 를 통합하지 않는 한 이것을 문제가 아닌 것으로 닫아도 좋습니다.

문제 자체가 useRef 가 아니라 createRef 를 기반으로 했기 때문에 $# createRef 에서 역참조된 포인터 값을 직접 수정하는 사람이 거의 없기 때문에 이 문제를 닫아도 괜찮습니다.

이 오버로드 패턴이 잘 나올지 궁금합니다. 후크 문서를 보면 기본값과 함께 useRef 를 몇 번 사용하는 것을 볼 수 있습니다. 이 경우 .current 의 값은 결코 null이지만 null이 아닌 어설션 연산자를 계속 사용하여 이를 통과하는 것은 사용자에게 일종의 성가신 일입니다.

초기 값이 주어지면 반환 값을 변경할 수 있지만 생략하면 변경할 수 없는 것이 더 합리적입니까? 초기 값이 주어지면 ref는 아마도 ref 를 통해 구성 요소에 전달되지 않을 것이며 인스턴스 변수처럼 더 많이 사용됩니다. 반면에 컴포넌트에 전달하기 위해 ref를 생성하는 경우 초기 값이 제공되지 않을 수 있습니다.

그런 생각이 들었습니다. @Kovensky 어떻게 생각하세요?

@ferdaber useRef 는 | null 와 null 를 포함하지 않는 일반 인수를 명시적으로 제공하지 않는 한 항상 변경 가능 _및_ nullable이 아닙니다.

구성 요소에 전달되는 참조는 null 로 초기화되어야 합니다. 왜냐하면 그것이 릴리스될 때 React가 참조를 설정하기 때문입니다(예: 조건부로 마운트된 구성 요소를 마운트 해제할 때). useRef 값을 전달하지 않으면 대신 undefined 시작하므로 이제 | null 신경 써야 하는 항목에 | undefined 를 추가해야 합니다. | null .

React 문서의 문제점과 초기 값 없이 useRef 를 사용하는 것은 React 팀이 null 와 undefined 의 차이에 대해 별로 신경 쓰지 않는 것 같습니다. 그것은 Flow 일 수 있습니다.

어쨌든, 내가 useRef 를 정의한 방식은 @bschlenk 의 사용 사례에 정확히 맞습니다. 위에서 언급한 이유로 null 는 "생략된" 값뿐입니다.

아, 자세히 보면 알겠지만, 리액트 소스에서 매개변수 없이 undefined 로 초기화되는 것도 흥미롭다. 쿨해서 모든 것이 복숭아처럼 들린다. 👍

있는 그대로는 괜찮다고 생각합니다. | null 를 포함하는지 여부에 관계없이 current 유형이 여전히 null일 수 있고 변경 가능성만 변경되었다는 점이 조금 이상합니다. 또한 React 문서는 항상 명시적으로 null을 전달하므로 initialValue를 생략하는 것이 유효한가요?

일반적으로 그렇지 않으며, 적어도 과거에 내가 어떤 문서에서 React 팀이 "작동하더라도" 생략할 의도가 없다고 지적했을 때 지적했습니다.

이것이 createContext 에 대한 첫 번째 인수가 필요한 이유입니다. 예를 들어 컨텍스트를 undefined 로 시작하려는 경우에도 마찬가지입니다. 실제로 undefined 를 전달해야 합니다.

일부 용도에서는 매개변수를 사용하지 않는 것 같습니다.

https://reactjs.org/docs/hooks-faq.html#is -there-something-like-instance-variables
https://reactjs.org/docs/hooks-faq.html#how -to-get-the-previous-props-or-state
https://reactjs.org/docs/hooks-faq.html#how -to-read-an-often-change-value-from-usecallback

@ferdaber 그것은 유형에 대해 신경 쓰지 않기 때문입니다. useRef() (인수 없음)의 current 유형은 무엇이어야 합니까? undefined ? any ? 그것이 무엇이든, 일반 인수를 제공하더라도 | undefined 해야 합니다. _그리고_ 반응 요소 참조로 사용하는 참조인 경우(단순히 스레드 로컬 저장소가 아니라) | null 도 해야 합니다. React가 거기에 null 를 쓸 수 있기 때문입니다.

이제 current 이 $#$ T T | null | undefined $ 임을 알게 됩니다.

// you should always give an argument even if the docs sometimes miss them
// $ExpectError
const ref1 = useRef()
// this is a mutable ref but you can only assign `null` to it
const ref2 = useRef(null)
// this is also a mutable ref but you can only assign `undefined`
const ref3 = useRef(undefined)
// this is a mutable ref of number
const ref4 = useRef(0)
// this is a mutable ref of number | null
const ref5 = useRef<number | null>(null)
// this is a mutable ref with an object
const ref6 = useRef<React.CSSProperties>({})
// this is a mutable ref that can hold an HTMLElement
const ref7 = useRef<HTMLElement | null>(null)
// this is the only case where the ref is immutable
// you did not say in the generic argument you want to be able to write
// null into it, but you gave a null anyway.
// I am taking this as the sign that this ref is intended
// to be used as an element ref (i.e. owned by React, you're only sharing)
const ref8 = useRef<HTMLElement>(null)
// not allowed, because you didn't say you want to write undefined in it
// this is essentially what would happen if we allowed useRef with no arguments
// to make it worse, you can't use it as an element ref, because
// React might write a null into it anyway.
// $ExpectError
const ref9 = useRef<HTMLElement>(undefined)

예, 이 DX는 저에게 적합하고 문서는 A++이므로 대부분의 사람들이 그것에 대해 혼동하지 않을 것이라고 생각합니다. 자세히 설명해 주셔서 감사합니다! 솔직히 typedoc에서 이 문제를 영구 링크해야 합니다. :)

useRef<T>() useRef<T | undefined>(undefined) 동일하게 동작하도록 하는 경우가 있을 수 있습니다. 그러나 그것으로 만든 ref는 여전히 스레드 로컬 저장소와 마찬가지로 요소 ref로 사용할 수 없습니다.

문제는... 허용되는 일반 인수를 _하지 않는_ 경우 어떻게 됩니까? TypeScript는 {} 만 추론합니다. 올바른 기본 유형은 unknown 이지만 사용할 수 없습니다.

다음 코드에서 이 오류가 발생합니다.

~~~js
// ...
IntervalRef = useRef로 하자(없는); // let 대신 const로 시도했습니다.
// ...
useEffect(() => {
const 간격 = setInterval( () => { /* 무언가를 하십시오 */}, 1000);
intervalRef.current = 간격; // 이 줄에서 오류가 발생합니다.

return () => {
    clearInterval(intervalRef.current);
}

})
// ...
~여기에서 readonly 를 제거하면 다음과 같이 작동합니다.~ js
인터페이스 참조 개체{
읽기 전용 전류: T | 없는;
}
~~~

나는 reack 후크와 typescript를 모두 사용하는 새로운 사람이므로(그냥 함께 사용해 보기만 하면 됨) 내 코드가 틀릴 수 있습니다.

기본적으로 null 기본값으로 참조를 만들고 일반 매개변수를 지정하면 React가 참조를 "소유"하도록 하려는 의도를 나타내는 것입니다. 자신이 소유한 ref를 변경하려면 다음과 같이 선언해야 합니다.

const intervalRef= useRef<NodeJS.Timeout | null>(null) // <-- the generic type is NodeJS.Timeout | null

@ferdaber 감사합니다!

여기서 한 단계 더 나아가 current 의 반환 유형을 살펴보면 T | null T 여야 할까요? 후크의 출현으로 우리는 모든 참조가 null 일 수 있는 경우가 _항상 그런 것은 아닙니다_, 특히 useRef 가 null이 아닌 이니셜라이저와 함께 호출되는 빈번한 경우에 그렇습니다.

내가 작성하는 경우 https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31065#issuecomment -446660394의 훌륭한 예제 목록에서 계속 진행합니다.

const numericRef = useRef<number>(42);

numericRef.current 의 유형은 무엇이어야 합니까? number | null 필요는 _필요_ 없습니다.

유형과 기능을 다음과 같이 정의했다면:

interface RefObject<T> {
  current: T;
}

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

function createRef<T>(): RefObject<T | null>;

다음과 같은 사용법과 유형을 생성합니다.

const r1 = useRef(42);
// r1 is of type RefObject<number>
// r1.current is of type number (not number | null)

const r2 = useRef<number>(null);
// r2 is of type RefObject<number | null>
// r2.current is of type number | null

const r3 = useRef(null);
// r3 is of type RefObject<null>
// r3.current is of type null

const r4 = createRef<number>();
// r4 is of type RefObject<number | null>
// r4.current is of type number | null

문제가 있습니까?

React 팀에 따르면 "매개변수화되지 않은 useRef 의 유형은 무엇입니까?"에 대한 답변은 해당 호출(문서에도 불구하고)이 올바르지 않다는 것입니다.

DOM/컴포넌트 참조에 대한 편의 오버로드로 |null _specifically_ 오버로드를 추가했습니다. 왜냐하면 항상 null을 시작하고 마운트 해제 시 항상 null로 재설정되며 현재 사용자 자신을 재할당하지 않기 때문입니다. 오직 React뿐입니다.

읽기 전용은 진정한 JavaScript 고정 객체/게터 전용 속성의 표현보다 논리 오류를 방지하기 위해 더 많이 있습니다.

어쨌든 값을 null로 초기화하는 동안 null을 허용하지 않는다는 일반 인수를 둘 다 제공할 때만 우연히 만들 수 있습니다. 다른 모든 경우는 변경 가능합니다.

아, 예, 이제 RefObject<T> MutableRefObject<T> 에서 이미 | null 케이스가 제거되었음을 알 수 있습니다. 따라서 useRef<number>(42) 케이스는 이미 올바르게 작동합니다. 설명 감사합니다!

createRef 로 무엇을 해야 합니까? 지금 당장은 변경할 수 없는 RefObject<T> 를 반환합니다. 이는 우리 코드베이스에 문제를 일으키고 있습니다. 이는 (변경 가능한) useRef ref 개체와 같은 방식으로 사용하고 싶기 때문입니다. createRef 타이핑을 조정하여 가변 ref 객체를 형성할 수 있는 방법이 있습니까?

(그리고 ref 속성은 RefObject<T> Ref<T> 유형으로 정의되어 모든 것을 변경할 수 없게 만듭니다. 이것은 우리에게 큰 문제입니다. useRef 중 ref , 우리는 forwardRef 호출을 통해 변경할 수 없다는 사실을 이용할 수 없습니다.)

흠... 아마도 우리는 인수가 없기 때문에(항상 null로 시작하기 때문에) 조건부 유형이 필요하기 때문에 동일한 트릭을 사용할 수 있습니다.

: null extends T ? MutableRefObject<T> : RefObject<T> 는 동일한 논리를 수행하고 사용해야 합니다. null을 넣고 싶다고 말하면 변경 가능하고, 그렇지 않으면 현재 의미에서 여전히 변경 불가능합니다.

아주 좋은 생각입니다. createRef 는 매개변수를 사용하지 않기 때문에 $ | null 옵션을 항상 포함해야 하므로 ( useRef 와 달리) MutableRefObject<T | null> 라고 해야 할 것입니다.

나는 둘 다 TS에서 일하게 할 수 없었습니다. 다음은 TS 플레이그라운드로 구성된 것입니다.
https://tinyurl.com/y75c32y3

유형은 항상 MutableRefObject 로 감지됩니다.

forwardRef 로 무엇을 할 수 있다고 생각하세요? ref 를 Ref<T> 로 선언하며, 여기에는 MutableRefObject 가능성이 포함되지 않습니다.

(어려움을 유발하는 우리의 유스 케이스는 기능적 ref 또는 ref 객체가 될 수 있는 ref의 배열을 취하고 전달될 수 있는 단일 결합된 ref [a functional ref]를 생성하는 mergeRefs 함수의 사용 사례입니다. 그런 다음 결합된 ref가 기능적 ref인 경우 호출하거나 ref 개체인 경우 .current 를 설정하여 제공된 모든 참조에 들어오는 참조 요소를 전달합니다. RefObject<T> 불변이고 MutableRefObject<T> in Ref<T> 가 포함되지 않으면 그게 어렵습니다. forwardRef와 Ref에 대해 별도의 문제를 제기해야 할까요?어려움?)

위에서 설명한 이유로 useRef 의 유형을 변경하지 않습니다( createRef 는 아직 논의 중임). 그 근거에 대해 질문이 있습니까?

https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31065#issuecomment -457650501에서 다루는 항목에 대해 별도의 문제를 제기해야 합니까?

예, 분리합시다.

null 값으로 시작하는 변경 가능한 ref 개체를 원하면 일반 인수에도 | null 를 지정해야 합니다. React가 아닌 "소유"하기 때문에 변경 가능합니다.

감사합니다! useRef 일반에 null을 추가하면 해결되었습니다.

전에

const ref = useRef<SomeType>(null) 

// Later error: Cannot assign to 'current' because it is a constant or a read-only property.

후에

const ref = useRef<SomeType | null>(null)

forwardRef 구성 요소에 대한 또 다른 의견이 생성되었습니까? 기본적으로 ref를 전달하고 현재 값을 직접 변경할 수 없습니다. 이는 ref를 전달하는 요점의 일부라고 생각합니다.

다음 후크를 만들었습니다.

export const useCombinedRefs = <T>(...refs: Ref<T>[]) =>
    useCallback(
        (element: T) =>
            refs.forEach(ref => {
                if (!ref) {
                    return;
                }

                if (typeof ref === 'function') {
                    ref(element);
                } else {
                    ref.current = element; // this line produces error
                }
            }),
        refs,
    );

그리고 오류가 발생합니다. "'현재'는 읽기 전용 속성이므로 할당할 수 없습니다."
current 를 writeable로 변경하지 않고 해결할 수 있는 방법이 있습니까?

그러기 위해서는 속임수를 써야 합니다.

(ref.current as React.MutableRefObject<T> ).current = element;

예, 이것은 약간 건전하지 않지만 이런 종류의 할당이 우연이 아닌 고의적인 경우라고 생각할 수 있는 유일한 경우입니다. React의 내부 동작을 복제하고 있으므로 규칙을 위반해야 합니다.

동일한 오버로드 논리를 갖도록 createRef 를 수정할 수 있지만 인수가 없기 때문에 조건부 유형 반환이 있어야 합니다. | null 를 포함하면 MutableRefObject 를 반환하고, 포함하지 않으면 (불변) RefObject 가 됩니다.

정말 감사합니다

(ref.current as React.MutableRefObject<T>).current = element;

해야한다:

(ref as React.MutableRefObject<T>).current = element;

React의 내부 동작을 복제하고 있습니다.

여기 문서 가 구식이라는 뜻인가요? 내부 동작이 아니라 의도된 워크플로로 명확하게 설명하기 때문입니다.

이 경우 문서는 귀하가 소유한 참조를 참조하지만 HTML 요소에 ref 속성으로 전달하는 참조의 경우 _당신에게_ 읽기 전용이어야 합니다.

function Component() {
  // same API, different type semantics
  const countRef = useRef<number>(0); // not readonly
  const divRef = useRef<HTMLElement>(null); // readonly

  return <button ref={divRef} onClick={() => countRef.current++}>Click me</button>
}

내 나쁜, 더 스크롤해야합니다. 내가 소유한 참조에 대해 readonly 에 대한 오류가 발생했으며 동일한 경우라고 가정했습니다. (지금은 다른 작업 흐름을 사용하고 있으며 불행히도 더 이상 오류를 재현할 수 없습니다...)

아무튼 설명 정말 감사합니다!

주제의 createRef 부분이 이동했는지 확실하지 않지만 여기에도 게시하겠습니다.

React Native(React Navigation)용으로 인기 있는 탐색 라이브러리를 사용합니다. 문서에서 일반적으로 createRef 를 호출한 다음 ref를 변경합니다. 나는 이것이 React가 그것들을 관리하지 않기 때문이라고 확신합니다(DOM이 없습니다).

React Native의 유형이 달라야 합니까?

참조: https://reactnavigation.org/docs/navigating-without-navigation-prop

@sylvanaar
탐색을 초기화할 때도 이 문제가 발생했습니다. 해결 방법을 찾으셨습니까?

방금 읽은 내용 요약: createRef<T> 에 의해 생성된 ref에 값을 설정하는 유일한 방법은 사용할 때마다 캐스트하는 것입니다. 그 이유는 무엇입니까? 이 경우 readonly 는 실제로 ref에 대한 값 설정을 전혀 방지하므로 함수의 전체 목적을 무효화합니다.

TLDR: 초기 값이 null (세부 정보: 또는 유형 매개변수 외부의 다른 값)인 경우 유형 매개변수에 | null 를 추가하면 .current 를 사용할 수 있습니다. 정상처럼 할당됩니다.