如何为文件选择器组件定义基于multiple属性的类型化onChange接口？

开发者阿泽

2026-6-30

实现根据multiple属性自动推断onChange参数类型的方案

你原来的写法无法生效，因为在接口内部不能直接引用自身属性作为条件类型的判断依据。要实现根据multiple的布尔值自动确定onChange的参数类型，有两种常用方案：

方案一：泛型结合条件类型

通过泛型参数约束multiple的类型，再用条件类型推导onChange的参数类型：

export interface FilePickerProps<T extends boolean = false> {
  multiple?: T;
  onChange: T extends true ? (selectedFiles: File[]) => void : (selectedFiles: File) => void;
}

使用示例

单文件上传（默认情况，无需指定泛型）：

const singleFilePicker = {
  onChange: (file) => {
    // file类型自动推断为File
    console.log("选中文件：", file.name);
  }
} satisfies FilePickerProps;

多文件上传（指定泛型为true）：

const multiFilePicker = {
  multiple: true,
  onChange: (files) => {
    // files类型自动推断为File[]
    console.log("选中文件数量：", files.length);
  }
} satisfies FilePickerProps<true>;

方案二：联合类型

直接定义两种互斥的属性组合，让TypeScript自动进行类型校验：

export type FilePickerProps = 
  | { multiple?: false; onChange: (selectedFiles: File) => void }
  | { multiple: true; onChange: (selectedFiles: File[]) => void };

使用示例

这种方式会强制multiple和onChange的类型匹配，不允许出现不一致的情况：

// 正确：单文件配置
const validSinglePicker = {
  multiple: false,
  onChange: (file: File) => {}
} satisfies FilePickerProps;

// 正确：多文件配置
const validMultiPicker = {
  multiple: true,
  onChange: (files: File[]) => {}
} satisfies FilePickerProps;

// 错误：multiple为true但onChange参数类型不匹配，TypeScript会报错
const invalidPicker = {
  multiple: true,
  onChange: (file: File) => {}
} satisfies FilePickerProps;