TypeScript TS7053错误求助：字符串索引User类型问题

问题描述 #

学习TypeScript时遇到TS7053错误：元素隐式拥有'any'类型，因为字符串类型的表达式无法用于索引User类型，该类型没有字符串类型参数的索引签名。错误出现在obj[name] = newValue行。

用户代码如下：

User接口定义 #

interface User {
  genderInterestMe: string;
  viewMeGender: string;
  radiusViewUsers: number;
  notifyStatus: boolean;
}

处理函数代码 #

const handleChangeFormData = (event: Event, newValue: number | boolean | string) => {
  const {target} = event
  const name: string = (target as HTMLButtonElement).name
  let obj:User= {
    genderInterestMe: genderInterestMe,
    viewMeGender: viewMeGender,
    radiusViewUsers: radiusViewUsers,
    notifyStatus: notifyStatus
  }
  obj[name] = newValue
  menuSettings(obj)
};

用户尝试过obj[name as keyof User] = newValue以及设置newValue: never，但都无效，询问解决方案是否正确。

错误原因分析 #

你之前的尝试无效的核心原因是：

• name as keyof User只是将name的类型从string缩小到User的键类型，但newValue是number | boolean | string的联合类型，TypeScript无法确保newValue的类型和当前name对应的User属性类型完全匹配，因此仍然会报错。
• 设置newValue: never完全不可行，因为never类型表示不存在的类型，无法传入任何有效值。

正确解决方案 #

方案一：使用泛型约束类型匹配 #

通过泛型将name和newValue的类型绑定，确保newValue的类型始终对应当前name对应的User属性类型：

const handleChangeFormData = <K extends keyof User>(event: Event, newValue: User[K]) => {
  const { target } = event;
  // 断言target的name为User的键类型K
  const name = (target as HTMLButtonElement).name as K;
  const obj: User = {
    genderInterestMe: genderInterestMe,
    viewMeGender: viewMeGender,
    radiusViewUsers: radiusViewUsers,
    notifyStatus: notifyStatus
  };
  // 此时TypeScript能确认newValue类型与obj[name]的类型匹配
  obj[name] = newValue;
  menuSettings(obj);
};

方案二：使用类型守卫做分支判断 #

如果不想用泛型，可以通过类型守卫逐个判断name对应的属性类型，确保newValue类型匹配：

const handleChangeFormData = (event: Event, newValue: number | boolean | string) => {
  const { target } = event;
  const name = (target as HTMLButtonElement).name as keyof User;
  const obj: User = {
    genderInterestMe: genderInterestMe,
    viewMeGender: viewMeGender,
    radiusViewUsers: radiusViewUsers,
    notifyStatus: notifyStatus
  };

  // 针对每个属性做类型断言
  if (name === 'genderInterestMe' || name === 'viewMeGender') {
    obj[name] = newValue as string;
  } else if (name === 'radiusViewUsers') {
    obj[name] = newValue as number;
  } else if (name === 'notifyStatus') {
    obj[name] = newValue as boolean;
  }

  menuSettings(obj);
};

不推荐的方案：添加索引签名 #

虽然可以给User接口添加字符串索引签名来消除错误，但这会失去TypeScript对属性类型的严格检查，不建议使用：

// 不推荐，会弱化类型检查
interface User {
  genderInterestMe: string;
  viewMeGender: string;
  radiusViewUsers: number;
  notifyStatus: boolean;
  [key: string]: string | number | boolean;
}

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