javascript - React useScroll hook 中的 Typescript 错误 : Cannot invoke an expression whose type lacks a call signature

Question

我有以下函数定义:

const useScroll = () => {
    const ref = useRef(null)
    function executeScroll() {
        if (ref !== null)
            window.scrollTo(0, ref.current.offsetTop)
    }

    const htmlElementAttributes = { ref }

    return [executeScroll, htmlElementAttributes]
}

export default useScroll;

基于这个函数，我有如下代码:

const [executeScroll, scrollHtmlAttributes] = useScroll();

const click_argueBtn = (e) => {
    e.preventDefault();
    executeScroll();//error
}

但是，executeScroll(); 代码会抛出以下错误:

Error: Cannot invoke an expression whose type lacks a call signature

我收到此错误的任何想法？我的代码基于 this post .

Answer 1

Typescript 正在尽最大努力自动确定类型，它确定 useScroll 返回一个数组，每个元素都是 () => void | { ref:/*ref type*/} (我不知道 ref 对象的确切类型是什么)。当您尝试调用 executeScroll 时，它不知道它是一个函数，还是一个带有 ref 的对象。因此，由于它可能不是一个函数，因此您不能调用它。

相反，我建议明确告诉 typescript useScroll 返回 tuple .元组类似于数组，除了您显式声明它有多少个元素以及它们各自的类型是什么:

const useScroll = (): [() => void, { ref: /* ref type */ }] => {
  // ...etc
}

或

const useScroll = () => {
  // ... etc
  return [executeScroll, htmlElementAttributes] as [() => void, { ref: /* ref type */ }];
}

或者如果你不喜欢它内联，你可以将它提取到一个类型:

export type UseScrollResult = [() => void, { ref: /* ref type */ }];
const useScroll = (): UseScrollResult => {
  // ...etc
}

由此，typescript 现在知道数组的元素 0 是 () => void，因此将它作为函数调用是合法的。