TypeScript索引类型隐式any错误及模态框关闭问题求助

你遇到的TypeScript错误核心是类型不匹配：

• for...in循环中，key的默认类型是string，但你的appointment对象的键是明确的三个字面量（customer/doctor/complaint），TypeScript不允许用任意string类型值去索引一个没有定义索引签名的对象。

以下是三种可行的修复方式：

方案1：将key断言为对象的键类型 #

直接在循环里把key断言为appointment的合法键类型，明确告诉TypeScript这个key是合规的：

const confirmHandler = async (id: string) => {
  let counter = 0;
  for (const key in appointment) {
    // 断言key为appointment的合法键类型
    const typedKey = key as keyof typeof appointment;
    if (universalRegExp.test(String(appointment[typedKey]))) {
      counter++;
    }

    if (counter === 3) {
      editAppoint(id);
      store.setTypeOfTask('');
    }
  }
  if (counter !== 3) {
    store.snackHolder('wrong simbols');
  }
};

方案2：为appointment添加索引签名 #

提前定义appointment的类型接口，并添加字符串索引签名，允许用任意string键访问对象：

// 定义Appointment接口
interface Appointment {
  customer: string;
  doctor: string;
  complaint: string;
  [key: string]: string; // 添加字符串索引签名
}

// 在useState中指定类型
const [appointment, setAppoint] = useState<Appointment>({
  customer,
  doctor,
  complaint
});

这种方式能解决报错，但允许用任意string键访问对象，安全性稍弱。

方案3：遍历明确的键数组（推荐） #

直接遍历预先定义的合法键数组，完全避免类型歧义，这是最安全的实现方式：

const confirmHandler = async (id: string) => {
  let counter = 0;
  // 定义appointment的合法键数组，as const确保类型是字面量数组
  const validKeys = ['customer', 'doctor', 'complaint'] as const;
  for (const key of validKeys) {
    if (universalRegExp.test(String(appointment[key]))) {
      counter++;
    }

    if (counter === 3) {
      editAppoint(id);
      store.setTypeOfTask('');
    }
  }
  if (counter !== 3) {
    store.snackHolder('wrong simbols');
  }
};

额外修复：补充事件参数类型 #

你的cancelHandler函数的e参数没有类型，会触发隐式any错误，建议补充类型：

const cancelHandler = (e: React.MouseEvent<HTMLElement>) => {
  if (e.target.dataset.close === 'closeThis') {
    store.setTypeOfTask('');
  }
};

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