Angular中Type 'null' cannot be used as an index type.ts(2538)错误修复咨询

错误原因很明确：prompt()函数在用户点击取消按钮时会返回null，而TypeScript严格的类型检查不允许用null作为对象的索引值，所以抛出了ts(2538)错误。同时，即使fieldName是字符串，也可能不是目标对象的有效键，建议同时处理这个潜在问题。

下面是几种可行的修复方案：

方案1：显式检查null值（推荐） #

先判断fieldName是否为null，只在有效时访问对象属性，同时通过类型断言缩小索引的类型范围：

onClick() {
  const obj = {
    fName: "ali",
    LName: "sarabi",
    age: "19",
  };
  const fieldName = prompt("field");
  
  if (fieldName !== null) {
    // 用keyof typeof obj确保索引是obj的有效键
    alert(obj[fieldName as keyof typeof obj]);
  } else {
    alert("请输入有效的字段名称");
  }
}

方案2：使用可选链+空值合并简化逻辑 #

如果不需要单独处理取消场景，可以用可选链处理null索引，空值合并设置默认提示：

onClick() {
  const obj = {
    fName: "ali",
    LName: "sarabi",
    age: "19",
  };
  const fieldName = prompt("field");
  
  // 可选链会在fieldName为null时返回undefined，空值合并替换为提示文本
  alert(obj[fieldName as keyof typeof obj] ?? "无效的字段名");
}

方案3：设置默认索引值 #

如果希望用户取消时显示默认字段内容，可以给fieldName设置默认值：

onClick() {
  const obj = {
    fName: "ali",
    LName: "sarabi",
    age: "19",
  };
  // 当prompt返回null或空字符串时，使用默认字段"fName"
  const fieldName = prompt("field") || "fName";
  
  alert(obj[fieldName as keyof typeof obj]);
}

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