TypeScript中file input设置directory属性报属性不存在如何解决

该错误是TypeScript静态类型校验拦截导致，核心原因有两点：

• directory、webkitdirectory是浏览器厂商为实现目录上传能力推出的实验性非标准HTML属性，虽然目前主流现代浏览器均已支持该能力，但React官方维护的类型包@types/react并未在InputHTMLAttributes<HTMLInputElement>类型定义中收录这两个属性，TS校验时会判定为非法属性。
• 该错误仅发生在类型检查阶段，不会影响代码实际运行的目录上传功能，只要浏览器支持对应属性，功能可正常触发。

根据项目实际场景，可选择以下任意一种方案修复：

• 方案1：临时类型断言（适配快速验证场景）
  把非标准属性放到对象中做类型断言，绕过TS的属性校验，不需要修改其他配置：

  <input
    type='file'
    className={cssClass}
    onChange={processFiles}
    {...{ directory: '', webkitdirectory: '' } as any}
  />
  

• 方案2：扩展全局类型定义（推荐，适配正式项目）
  在项目的全局类型声明文件（通常为src/global.d.ts、vite-env.d.ts或react-app-env.d.ts）中补充缺失的属性类型，一次配置后全项目生效，不需要修改业务组件代码：

  import 'react';
  declare module 'react' {
    interface InputHTMLAttributes<T> {
      directory?: string;
      webkitdirectory?: string;
    }
  }
  

• 方案3：DOM原生API设置属性（无类型侵入）
  如果不想修改全局类型，也可以通过ref拿到input的DOM实例，在挂载完成后手动给DOM设置属性，完全避开JSX的类型校验：

  import { useRef, useEffect } from 'react';
  
  function DirectoryUploadInput() {
    const inputRef = useRef<HTMLInputElement>(null);
    useEffect(() => {
      if (inputRef.current) {
        inputRef.current.setAttribute('directory', '');
        inputRef.current.setAttribute('webkitdirectory', '');
      }
    }, []);
  
    const processFiles = (e: React.ChangeEvent<HTMLInputElement>) => {
      // 原有文件处理逻辑
    };
  
    return (
      <input
        ref={inputRef}
        type='file'
        className={cssClass}
        onChange={processFiles}
      />
    );
  }
  

注意：webkitdirectory在11.2版本以下的Safari浏览器中不支持，若需要兼容低版本iOS设备，建议在使用前做能力检测。

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