reactjs - Typescript args 类型推断的困难

Question

我无法理解推理错误。ts linter 下划线带有下面的消息(event: E)。 useCallback当我useCallback使用as Tlinter 消息进行回调时，它就消失了。有没有办法避免这样做？我不明白什么？

完整代码：

import { DependencyList, useCallback } from 'react'

const useStopBubblingCallback = <T extends (event: E) => any, E extends Event = Event>(
  callback: T,
  deps: DependencyList
) : T =>
  useCallback<T>((event: E) => {
    event.stopPropagation()
    event.preventDefault()
    return callback(event)
  }, deps)

export default useStopBubblingCallback

短绒消息：

Argument of type '(event: E) => any' is not assignable to parameter of type 'T'.
  '(event: E) => any' is assignable to the constraint of type 'T', 
but 'T' could be instantiated with a different subtype of constraint 
'(event: E) => any'.ts(2345)

标签： reactjstypescriptinference

Answer 1

您可以更改useStopBubblingCallback为以下签名（示例）：

const useStopBubblingCallback = <E extends Event = Event>(
  callback: (event: E) => any,
  deps: DependencyList
) : (event: E) => any =>
  useCallback((event: E) => { /*your code*/ }, deps)

const cb = useStopBubblingCallback((event: MouseEvent) => {}, []) 
// cb: (event: MouseEvent) => any

请注意，在您的情况下，类型参数E在外部函数中没有推理候选者，因此 TypeScript 不能做任何有用的事情E（它会一直固定Event）。

我们还删除了手动类型参数，useCallback<T>让编译器自动推断其类型。