如何通过TypeScript泛型结合useCallback为react-dropzone的acceptedFiles指定类型

方法1：使用默认File类型 #

如果不需要自定义文件属性，直接将acceptedFiles的类型指定为File[]即可，同时可以补上完整的参数类型（fileRejections和event）：

import { useCallback } from 'react';
import { useDropzone, FileRejection, DropEvent } from 'react-dropzone';

const onDrop = useCallback(
  (acceptedFiles: File[], fileRejections: FileRejection[], event: DropEvent) => {
    acceptedFiles.forEach((file) => {
      console.log(file.name, file.size); // 此时file类型为File，可直接访问其内置属性
    });
  },
  []
);

const { getRootProps, getInputProps } = useDropzone({ onDrop });

如果不需要用到fileRejections和event，可以用下划线忽略这些参数：

const onDrop = useCallback((acceptedFiles: File[], _, __) => {
  acceptedFiles.forEach((file) => {
    console.log(file);
  });
}, []);

方法2：使用自定义扩展文件类型 #

如果需要给文件添加自定义属性（比如额外的元数据），可以先定义一个扩展File的类型，再通过泛型T指定：

import { useCallback } from 'react';
import { useDropzone, FileRejection, DropEvent } from 'react-dropzone';

// 定义自定义文件类型，扩展原生File
type CustomFile = File & {
  uploadId: string; // 自定义属性示例
};

const onDrop = useCallback(
  <T extends CustomFile>(acceptedFiles: T[], fileRejections: FileRejection[], event: DropEvent) => {
    acceptedFiles.forEach((file) => {
      console.log(file.uploadId); // 可安全访问自定义属性，类型检查生效
    });
  },
  []
);

const { getRootProps, getInputProps } = useDropzone({ onDrop });

原理说明 #

react-dropzone的onDrop回调本身是一个泛型函数<T extends File>，其中T默认就是原生File类型。我们可以通过显式指定泛型参数，或者直接使用File[]来替代any，让TypeScript提供完整的类型检查和提示。

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