切换到M1 MacBook后HTMLInputElement可选属性赋值类型不兼容问题

问题根因 #

你遇到的报错和M1芯片本身无关，是迁移后重新安装依赖时，拉取了更新版本的@types/react/@types/react-dom导致的。新版本的React类型定义收紧了JSX属性校验规则：原生HTML元素的可选属性只允许完全省略不传，不允许显式传入undefined，因此你把带undefined值的对象直接展开传给input元素时就会触发类型不兼容报错。

可行解决方案 #

方案1：过滤对象中的undefined属性（最推荐） #

写一个工具函数移除对象中所有值为undefined的键，再展开传给元素，既符合类型要求也不会产生无效属性：

// 通用工具函数
const omitUndefined = <T extends Record<string, any>>(obj: T) => {
  return Object.fromEntries(
    Object.entries(obj).filter(([_, value]) => value !== undefined)
  ) as Partial<T>
}

修改input组件的写法：

<input
  ref={inputRef}
  id={id || name}
  value={value}
  data-lpignore='true'
  {...omitUndefined({
    name,
    type,
    inputMode,
    placeholder,
    disabled,
    required,
    size,
    list,
    minLength,
    maxLength,
    pattern,
    readOnly,
    onChange,
    onInvalid
  })}
/>

方案2：回退类型库版本 #

将@types/react和@types/react-dom固定为你之前Hackintosh环境中使用的旧版本，避免新的校验规则影响。

1. 先在旧环境执行npm list @types/react @types/react-dom查看实际安装的版本号
2. 在package.json中修改对应依赖的版本，去掉版本号前的^/~符号做固定：

{
  "devDependencies": {
    "@types/react": "18.0.20", // 替换为你之前的实际版本号
    "@types/react-dom": "18.0.6"
  }
}

3. 删除lock文件和node_modules，重新安装依赖即可。

方案3：临时类型断言（不推荐，仅救急使用） #

如果需要快速跳过校验，可以给展开的对象加上类型断言：

{...{
  name,
  type,
  // ...其余属性
} as React.InputHTMLAttributes<HTMLInputElement>}

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