Блог

У меня есть эта функция:

 function useSomething<T extends Element>(ref?: React.RefObject<T>) {
  const elementRef = ref ? ref : useRef(null)
  const [bb, setBb] = useState(false)

  // do something...

  return ref ? [bb] : [elementRef, bb]
}
  

Таким образом, ее можно вызвать двумя способами:

 const [ref, bb] = useSomething<HTMLDivElement>()
  

или

 const ref = useRef(null)
const [bb] = useSomething<HTMLDivElement>(ref)

// TYPE ERROR
<div className="" ref={ref}></div> 
  

Здесь я получаю:

 Type 'boolean | MutableRefObject<any>' is not assignable to type 'LegacyRef<HTMLDivElement>'.
Type 'false' is not assignable to type 'LegacyRef<HTMLDivElement>'
  

Как я могу ввести функцию так, чтобы возвращаемый тип всегда был правильным?

Typescript не будет определять возвращаемый тип на основе условия. Для получения желаемого эффекта необходимо использовать перегрузки:

 function useSomething<T extends Element>(ref: React.RefObject<T>): [boolean]
function useSomething<T extends Element>(): [React.RefObject<T>, boolean]
function useSomething<T extends Element>(ref?: React.RefObject<T>) {
  const elementRef = ref ? ref : useRef(null)
  const [bb, setBb] = useState(false)

  // do something...

  return ref ? [bb] : [elementRef, bb]
}
  

Ссылка на игровую площадку