TypeScript赋值报any不能分配给never等三类错误如何解决

报错1：找不到名称'valueof' #

原因 #

TypeScript 没有内置名为valueof的关键字/类型工具，直接使用会触发未定义错误。

解决方法 #

自行声明全局通用的ValueOf泛型工具类型：

type ValueOf<T> = T[keyof T];

后续使用时替换原有写法为ValueOf<FormField>即可：

const saveFormField = (key: keyof FormField, value: ValueOf<FormField>) => {
// 其余逻辑
}

报错2：类型无法分配给never #

原因 #

你当前的写法中，key是FormField所有键的联合类型，value是FormField所有值的联合类型，TypeScript 无法将两者的类型做关联绑定，无法确定传入的value一定匹配当前key对应的类型，因此赋值时会判定为不存在合法的赋值场景，抛出never类型错误。

解决方法 #

给函数添加泛型参数，将key和value的类型做绑定：

const saveFormField = <K extends keyof FormField>(key: K, value: FormField[K]) => {
    let formField: FormField = {
      name: reloadProps?.formField?.name ?? "",
      type: reloadProps?.formField?.type ?? "",
      mandatory: reloadProps?.formField?.mandatory ?? false,
      regex: reloadProps?.formField?.regex ?? "",
      selectItemOtherArbitraryValueEnable: reloadProps?.formField?.selectItemOtherArbitraryValueEnable,
      // 注意：如果FormField还有其他必填属性，需要在这里补充默认值，避免初始化类型错误
    };
    formField[key] = value;
    // 其余逻辑
}

报错3：EventTarget上不存在value属性 #

原因 #

React 泛型事件React.FocusEvent的默认target类型是通用Element，只有HTMLInputElement、HTMLTextAreaElement等表单元素才具备value属性，默认类型下访问value会触发类型错误。

解决方法 #

给事件参数指定具体的表单元素泛型，例如你当前监听的是输入框的blur事件，就指定为HTMLInputElement：

onBlur={(e: React.FocusEvent<HTMLInputElement>) =>
  saveFormField("name", e.target.value)
}

如果监听的是下拉框、文本域等其他元素，替换泛型为HTMLSelectElement、HTMLTextAreaElement即可。

内容的提问来源于stack exchange，提问作者János