I want to manage closing a modal by click not only button and also to substrate. In JSX without Typescript this code works good. This example returns to me couple errors in line:
if (universalRegExp.test(String(appointment[key])))

  1. 元素隐式具有""any""类型,因为类型为""字符串""的表达式不能用于索引类型""{Customer:String;Document:Strong;Memment:String;}"".""
  2. 在类型‘{Customer:String;Document:String;Procment:Strong;}’上找不到参数类型为‘字符串’的索引签名.

What I do wrong?
Thanks.

ModalEdit.tsx

interface ModalEditI {
  id: string;
  setList: () => void;
}

const ModalEdit: FC<ModalEditI> = ({ id, setList }) => {
  const store = useContext(Context);
  const universalRegExp = /^[а-яА-Яa-zA-Z\s.]{2,30}$/;
  const date = store.stateFields.date;
  const { customer, doctor, complaint } = store.stateFields;
  const [appointment, setAppoint] = useState({
    customer,
    doctor,
    complaint
  });

  const confirmHandler = async (id: string) => {
    let counter = 0;
    for (const key in appointment) {
      if (universalRegExp.test(String(appointment[key]))) { // <--There is problem
        counter++;
      }

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

  const editAppoint = async (id: string) => {
    await store.editAppoint(id, appointment, date);
    const appointments = await store.getAppointments();
    setList(appointments);
  };

  const cancelHandler = (e) => {
    if (e.target.dataset.close === 'closeThis') {
      store.setTypeOfTask('');
    }
  };

  return (
    <div 
      className='modal_substrate'
      data-close='closeThis'
      onClick={cancelHandler}
    >
      <div className='modal bigger'>
        <div className='modal_header'>
          <h1 className='modal_head_text'>Edit count</h1>
        </div>
          <button data-close='closeThis' onClick={cancelHandler}>
            Отмена
          </button>
          <button onClick={() => confirmHandler(id)}>Confirm</button>
      </div>
    </div>
  );
};

推荐答案

The issue is that typescript isn't very "sure" that the key variable is a valid key of appointment.
Here is a blogpost that covers this exact situation:
https://trungk18.com/experience/how-to-iterate-over-objects-in-typescript/

In it there are a few options to solve your issue, but if you want to keep the structure of your for in loop, a the solution it proposes is to declare key beforehand with the valid type keyof typeof appointment,
so the start of your confirm handler would look a little more like this:

let counter = 0;
let key: keyof typeof appointment;
for (key in appointment) {
  if (universalRegExp.test(String(appointment[key]))) {
    counter++;
  }
...
}

Typescript相关问答推荐

当两个参数具有相同的通用类型时,如果没有第一个参数,则递减约束默认会导致第二个参数的错误推断

之间是否有区别:例如useEffect()React.useEffect()

如何在Jest中嘲笑location.back()方法调用进行Angular 组件测试?

"@ clerker/nextjs/server没有名为clerkMiddleware的导入成员'

脉轮ui打字脚本强制执行图标按钮的咏叹调标签-如何关闭

React组件数组及其props 的类型定义

有没有办法适当缩小类型?

Angular 17 -如何使用新的@if语法在对象中使用Deliverc值

Angular 17 Select 错误core.mjs:6531错误错误:NG 05105:发现意外合成监听器@transformPanel.done

如何将联合文字类型限制为文字类型之一

如何通过TypeScript中的工厂函数将区分的联合映射到具体的类型(如类)?

无法从Chrome清除还原的初始状态数据

返回具有递归属性的泛型类型的泛型函数

类型脚本满足将布尔类型转换为文字.这正常吗?

为什么在leetcode问题的测试用例中,即使我确实得到了比预期更好的解决方案,这段代码也失败了?

`fetcher.load`是否等同于Get Submit?

TypeScrip:使用Union ToInterval辅助对象,但保留子表达式

ANGLE NumberValueAccessor表单控件值更改订阅两次

在单独的组件中定义React Router路由

如何在TypeScript类成员函数中使用筛选后的keyof this?