React+TypeScript表单验证报错Property 'email'不存在于Readonly<{}>如何解决

• 类型定义缺失：你声明的IRegisterState是空接口，TypeScript会默认组件state的类型为Readonly<{}>，你在constructor中初始化的nick、nickError字段，以及代码中用到的mail/email字段都没有提前在状态接口中声明，因此TS抛出属性不存在的报错。
• 语法逻辑错误：报错行if(this.state.mail="")中使用了赋值运算符=而非相等判断运算符===，该写法会直接给mail赋值空字符串，不会执行你预期的空值判断逻辑。
• 字段不匹配：你目前在constructor中初始化的state里并没有定义mail或email字段，如果不是字段名拼写错误（比如实际要判断的是nick），需要补充对应字段的初始化。

步骤1：补全状态接口类型定义 #

根据你实际用到的字段补全IRegisterState，示例如下：

interface IRegisterState {
  nick: string;
  nickError: string;
  // 用到哪个字段就加哪个
  mail?: string;
  email?: string;
}

步骤2：补充state初始化 #

在constructor的state中补充你需要用到的字段初始值：

// 注意props的类型也要用你定义的IRegisterProps，不要用any
constructor(props: IRegisterProps) {
  super(props);
  this.state = {
    nick: "",
    nickError: "",
    // 对应加你需要的字段
    mail: "",
    email: ""
  };
}

步骤3：修正判断逻辑 #

把赋值运算符改成全等判断运算符，统一字段名：

nickValidator(){
  // 以判断mail为空为例
  if(this.state.mail === ""){
    // 你的验证逻辑
  }
}

内容的提问来源于stack exchange，提问作者doğan kısa