如何使用 TypeScript 泛型通过 React 的 useCallback 扩展库函数

Question

我正在使用react-dropzone 创建一个组件。React-dropzone 提供了一个useDropzone()以对象作为参数的 a ，例如useDropzone({ onDrop })。

CodeSandbox 示例在这里

useDropzone 的类型是：

export function useDropzone(options?: DropzoneOptions): DropzoneState;

Dropzone选项有

export type DropzoneOptions = Pick<React.HTMLProps<HTMLElement>, PropTypes> & {
  onDrop?: <T extends File>(acceptedFiles: T[], fileRejections: FileRejection[], event: DropEvent) => void;
};

如何通过在 useCallback 中acceptedFiles键入泛型来键入（而不是任何） ？T

  const onDrop = useCallback((acceptedFiles: any) => {
    acceptedFiles.forEach((file) => {
      console.log(file)
    })
  }, [])

Answer 1

您可以在函数中添加类型useCallback

const onDrop = useCallback(<T extends File>(acceptedFiles: T[]) => {
  acceptedFiles.forEach((file) => {
    console.log(file)
  })
}, [])

您还可以选择直接使用 useCallback 上的类型

type OnDropType = NonNullable<DropzoneOptions['onDrop']>;

const onDrop = useCallback<OnDropType>((acceptedFiles) => {
  acceptedFiles.forEach((file) => {
    console.log(file)
  })
}, [])

NonNullable是需要的，因为useCallback不喜欢 undefined 作为函数类型。