جاوااسکریپت - خطای تایپاسکریپت: ویژگی 'clientHeight, scrollHeight, scrollTop' در نوع 'HTMLDivElement | null' وجود ندارد,

من از هوک useRef برای تابع اسکرول خود استفاده کردهام، نوع HTMLDivElement را تنظیم کردهام اما خطا میگیرم Property 'clientHeight, scrollHeight, scrollTop' does not exist on type 'HTMLDivElement | null'

اگر روی useRef موس ببرم، نمایش میدهد (alias) useRef<HTMLDivElement>(initialValue: HTMLDivElement | null): RefObject<HTMLDivElement> (+2 overloads) import useRef

  const scrollRef = useRef<HTMLDivElement>(null);
  const getActivityFeedOnScroll = () => {
    const {scrollTop, scrollHeight, clientHeight} = scrollRef?.current;
    scrollTop + clientHeight === scrollHeight && fetchNextPage();
  };

اگر اینطور انجام دهم، نوع به من خطا نمیدهد، اما میخواهم شرطهای if را با نگهبان null جایگزین کنم تا کد تمیزتر شود.

 +  const getActivityFeedOnScroll = () => {
+    if (!scrollRef.current) return;
+    const {scrollTop, scrollHeight, clientHeight} = scrollRef.current;
+    if (scrollTop + clientHeight === scrollHeight) fetchNextPage();
+  }; 

پاسخ شماره ۱

تا جایی که من میدانم، شما به سادگی نمیتوانید این کار را انجام دهید.

به آن فکر کنید، در اولین بلوک کد خود میگویید { someStuff }=scrollRef?.current; اگر scrollRef تعریف نشده باشد یا null باشد، سعی نمیکند به current دسترسی پیدا کند، این ممکن است چیزی شبیه به «ویژگی current در نوع undefined وجود ندارد» را پرتاب کند. در عوض، scrollRef?.current فقط null میشود، و بنابراین { someStuff } هیچ معنایی ندارد.

اگر زبان تایپاسکریپت اجازه میداد این کار را انجام دهید، شما باید بررسی کنید که someStuff خالی (null یا undefined) نباشد به این صورت.

  const scrollRef = useRef<HTMLDivElement>(null);
  const getActivityFeedOnScroll = () => {
    const {scrollTop, scrollHeight, clientHeight} = scrollRef?.current;
    if (scrollTop && clientHeight && scrollHeight)
        scrollTop + clientHeight === scrollHeight && fetchNextPage();
  };

این از حالت دوم تو بههمریختگی بیشتری دارد (که راه درست انجام کارها است).

به طور خلاصه، اگر مورد اول شما خطایی در scrollRef?.current ندهد، در عوض آن را در خط بعدی که میخواهید از ویژگیهای scrollRef?.current استفاده کنید، نشان خواهد داد.

کد شما نامرتبتر نیست، تعداد "الگوهای ثابت" بیشتری ندارد، فقط صریحتر است، که این یک چیز خوب است. شما بهطور صریح به کد خود میگویید چه کاری انجام دهد وقتی scrollRef.current تهی است.