React/TypeScript报错：类型“string”不可分配给类型“number”的解决方法

这个错误的核心原因是：React对textarea的cols和rows属性的类型定义为number，而你传入了字符串类型的值，TypeScript的类型检查机制因此抛出不兼容的错误。以下是几种可行的修复方案：

方案1：直接传入数字字面量 #

这是最直接的解决方式，将字符串形式的"30"、"10"改为数字类型的30、10：

// 错误写法
<textarea cols="30" rows="10" />

// 修复后
<textarea cols={30} rows={10} />

方案2：将字符串值转换为数字 #

如果你的cols/rows值来自字符串类型的变量（比如props、后端返回数据），可以通过类型转换将其转为数字：

// 假设从props获取的字符串值
const { colsStr, rowsStr } = props;

// 使用Number()转换
<textarea cols={Number(colsStr)} rows={Number(rowsStr)} />

// 或者使用+运算符快速转换
<textarea cols={+colsStr} rows={+rowsStr} />

注意：如果转换的字符串不是有效数字（比如"abc"），会得到NaN，可能导致textarea的行列数异常，建议提前做合法性校验。

方案3：类型断言（不推荐，仅在确定值合法时使用） #

如果你能100%确定字符串值是有效的数字，可以使用类型断言绕过TypeScript检查，但这种方式会弱化类型安全，不建议常规使用：

<textarea cols={"30" as unknown as number} rows={"10" as unknown as number} />

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