如何移除useCallback推断类型中的undefined实现正确参数类型推导

当左侧变量的标注类型是「函数类型 | undefined」的联合类型时，TypeScript 不会拿这个联合类型做上下文类型推导，自然无法给右侧useCallback的回调参数自动匹配类型。从类型规则上看，这个变量允许被赋值为undefined，TS 没法确定你传入的useCallback返回值一定匹配联合中的函数分支，因此不会执行对应的类型推导，最终触发参数隐式为any的报错。

你不需要自定义Defined工具类型，下面几种写法都可以解决问题，按推荐优先级排序：

• 直接在useDropzone配置内联写onDrop回调，完全不需要额外标注类型
  这是最简洁、最符合TS上下文推导逻辑的写法，TS会自动根据useDropzone的入参类型，推导onDrop回调的参数类型，不会出现隐式any问题：

  const {getRootProps, getInputProps, isDragActive} = useDropzone({
    onDrop: useCallback(acceptedFiles => {
      console.log(acceptedFiles)
    }, [])
  })
  

• 使用TS内置Required工具类型提取纯函数类型
  如果你确实需要把onDrop单独抽成变量定义，直接用内置的Required把DropzoneOptions的可选属性转成必选，就能自动排除类型里的undefined，不需要自己写类型工具：

  const onDrop: Required<DropzoneOptions>['onDrop'] = useCallback(acceptedFiles => {
    console.log(acceptedFiles)
  }, []);
  const {getRootProps, getInputProps, isDragActive} = useDropzone({onDrop})
  

  这种写法和你自定义Defined的效果完全一致，只是复用了TS内置能力，少写了冗余的类型定义。

非空断言是值层面的语法，作用是告诉TS「某个值不是null/undefined」，不能直接用在类型位置解决推导问题。
你当然可以通过给useCallback返回值加非空断言、甚至类型断言绕开检查，但这种写法既冗余，也没法让TS自动推导回调参数类型，本质是绕过类型检查，不是推荐的解决方案：

// 不推荐，冗余且无法自动推导参数类型
const onDrop = useCallback(acceptedFiles => {
  console.log(acceptedFiles)
}, [])!;

上面的写法里，acceptedFiles依然会被推成隐式any，你还是得手动标注参数类型，便捷性远低于前面两种方案。

内容的提问来源于stack exchange，提问作者seyed