Question

我有这个功能：

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>'

如何键入函数，以便返回类型始终正确？

Answer 1

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]
}

Playground Link

键入一个根据可选输入返回两种不同类型的函数

1 个答案: