Vue3+TypeScript中Ant Design Vue表单formRef.value报错求助

你遇到的TS报错'formRef.value' is possibly 'undefined'，原因是声明formRef时未指定初始值，TypeScript推断它的类型为Ref<FormInstance | undefined>，直接调用formRef.value的方法时，TS会提示存在undefined的风险。下面是几种实用的解决方法：

方案1：使用非空断言! #

如果能确定调用CreateConfig时表单已完成挂载（比如通过表单内的按钮触发该函数），可以用非空断言操作符!告诉TypeScript：此时formRef.value一定存在，不会是undefined。

修改后的CreateConfig函数：

const CreateConfig = async () => {
  formRef.value!.validateFields().then(values => {
        console.log('Received values of form: ', values);
        console.log('formState: ', toRaw(DataCreate));
        visibleCreate.value = false;
        formRef.value!.resetFields();
        console.log('reset formState: ', toRaw(DataCreate));
      }).catch(info => {
        console.log('Validate Failed:', info);
      });
};

方案2：先校验表单实例是否存在（更安全） #

如果不确定表单是否一定已挂载，推荐先判断formRef.value是否存在，避免运行时出现Cannot read properties of undefined的错误。

修改后的CreateConfig函数：

const CreateConfig = async () => {
  const formInstance = formRef.value;
  // 若表单实例不存在，直接终止函数执行
  if (!formInstance) return;

  formInstance.validateFields().then(values => {
        console.log('Received values of form: ', values);
        console.log('formState: ', toRaw(DataCreate));
        visibleCreate.value = false;
        formInstance.resetFields();
        console.log('reset formState: ', toRaw(DataCreate));
      }).catch(info => {
        console.log('Validate Failed:', info);
      });
};

方案3：明确ref的初始值类型 #

可以将formRef的类型声明为Ref<FormInstance | null>，初始化时赋值为null，语义更清晰，再配合方案2的判断逻辑使用：

修改ref的声明：

const formRef = ref<FormInstance | null>(null)

然后CreateConfig函数沿用方案2的写法即可。

内容的提问来源于stack exchange，提问作者Nguyễn Thế Hưng