将JS转TS时遇Type 'undefined' cannot be used as an index type报错求助

你的问题根源有两个：一是propName的类型定义错误，二是可选参数可能为undefined，无法直接用作对象索引。下面是具体的修复方案：

1. 给用户对象定义明确类型（可选但推荐） #

显式定义类型能让TypeScript更好地做类型检查，避免隐式推断的问题：

type User = {
  firstName: string;
  lastName: string;
  companyName: string;
  email: string;
  password: string;
  id: string;
};

const [newUser, setNewUser] = useState<User>({
  firstName: "",
  lastName: "",
  companyName: "",
  email: "",
  password: "",
  id: ""
});

const [errorMessage, setErrorMessage] = useState("");

2. 修改setValues函数的类型约束与逻辑 #

原来的propName设为number类型，但你的用户对象的键都是字符串（firstName、lastName等），类型完全不匹配；同时可选参数可能为undefined，必须先做非空检查才能用作索引。修复后的函数如下：

const setValues = (propName?: keyof User, value?: string) => {
  const cloneUser = { ...newUser };
  // 只有当propName和value都存在时，才执行更新
  if (propName !== undefined && value !== undefined) {
    cloneUser[propName] = value;
    setNewUser(cloneUser);
  }
  setErrorMessage("");
};

如果不想显式定义User类型，也可以让TypeScript自动推断对象的键类型：

const setValues = (propName?: keyof typeof newUser, value?: string) => {
  const cloneUser = { ...newUser };
  if (propName && value !== undefined) {
    cloneUser[propName] = value;
    setNewUser(cloneUser);
  }
  setErrorMessage("");
};

关键修复点说明 #

• 修正索引类型：用keyof User或keyof typeof newUser约束propName，确保它只能是用户对象已存在的键，避免类型不匹配。
• 非空检查：通过if (propName !== undefined)确保索引值不是undefined，TypeScript才允许将其用作对象索引。
• 值类型约束：把value?: any改为value?: string，因为用户对象的所有属性都是字符串类型，避免任意类型带来的潜在问题。

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