Definitelytyped: [@ प्रकार/प्रतिक्रिया] रेफ प्रोप प्रकार के साथ उपयोग रेफ रिटर्न प्रकार संघर्ष

संपादित करें 2: मेरे समाधान की अवहेलना करें, नीचे दिए गए का उपयोग करें :)

मुझे वर्तमान में एक ही समस्या है, क्या आपको किसी भी मौके से पहले ही समाधान मिल गया है?

संपादित करें: अब मैं इसका उपयोग कर रहा हूं, स्वीकार्य रूप से इतना सुंदर नहीं, समाधान:

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

यहां मिला: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/28884#issuecomment -471341041

एक छोटा सा साफ समाधान है कि यूज़रफ फंक्शन कॉल में इनिशियलवैल्यू को शून्य पर सेट करें

const componentRef = useRef<HTMLDivElement>(null);

यह सुनिश्चित करता है कि ComponentsRef = HTMLDivElement | null जो कि रेफरी प्रोप HTMLDivElement | undefined के बजाय अपेक्षा कर रहा है।

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

मुझे यकीन नहीं है कि यह हर किसी की समस्या को ठीक कर देगा, और मैं इस सामान पर कोई विशेषज्ञ नहीं हूं, लेकिन मैं रेफरी के रूप में जो गुजर रहा था उसके टाइपिंग और घटक के वास्तविक रेफ प्रकार को देखने के बाद मैं रेफरी को पास कर रहा था , ऐसा लग रहा था जैसे मेरे पास इंटरफेस गलत था।

मुझे शुरू में प्राप्त करने वाले घटक के लिए प्रॉप्स का एक इंटरफ़ेस था:

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 है:

मैं इसे अपने Panel घटक को प्रोप ref के रूप में पास करता हूं:

मैं उपभोग करने की कोशिश करता हूं 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`;
            }

प्रतिक्रिया-मूल-वेब का उपयोग करके, मुझे इसका उपयोग करना पड़ा।

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

मुझे Input तत्व के लिए रेफरी के साथ यह समस्या थी
इसलिए मैंने useRef<HTMLDivElement>() -> useRef<HTMLInputElement>() से स्विच किया और इसने ठीक काम किया

@joshribakoff आप सीधे पैरामीटर भी टाइप कर सकते हैं

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

इस तरह आपको अपना रेफरी एक्सेस करते समय टाइपकास्ट नहीं करना चाहिए।
लेकिन मुझे अभी भी समझ नहीं आ रहा है कि हमें ऐसा क्यों करना है...