React中InputHTMLAttributes的value只读数组类型来源及使用疑问

一、ReadonlyArray的类型来源 #

ReadonlyArray<string>是TypeScript原生提供的内置类型，用来表示内容不可被修改的字符串数组。React的类型定义（如InputHTMLAttributes）直接复用了这个TypeScript内置类型，无需额外自定义。

二、适用的输入类型 #

这个只读数组类型专门用于支持多选的表单输入控件，常见场景包括：

• 多选下拉框：<select multiple>，选中的多个选项值会以数组形式存储
• 同name的多个复选框：一组<input type="checkbox" name="xxx">，选中的复选框value会组成数组

当这些控件以受控模式使用时，value属性需要用数组承载多个选中值，ReadonlyArray<string>就是对应的类型约束。

三、为何定义为只读 #

这是为了契合React的不可变数据更新原则：

• React依赖状态的引用变化触发组件重渲染，如果直接修改原数组（比如用push/pop方法），数组引用不会改变，React无法感知状态更新，组件也就不会重新渲染。
• 用ReadonlyArray可以从类型层面强制开发者不能直接修改原数组，必须通过生成新数组的方式（比如扩展运算符[...oldArray, newValue]、filter、map等）更新状态，保证状态变化能被React正确捕获，避免状态与UI不一致的问题。
• 同时也提升了类型安全性，防止意外修改数组导致的逻辑错误。

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