\'formRef.value\' 可能是 \'undefined\'。在 Vue 3 和 TypeScript 中答案

【问题标题】：'formRef.value' is possibly 'undefined'. in Vue 3 and TypeScript\'formRef.value\' 可能是 \'undefined\'。在 Vue 3 和 TypeScript 中
【发布时间】：2022-12-10 15:17:36
【问题描述】：

我正在编写一个函数，该函数基于表单获取数据并使用 AntDesign 提供的表单，但是当我将它与 Vue 3 和 TypeScript 一起使用时，它会给出一条错误消息：

常量 formRef: Ref<FormInstance |未定义>

'formRef.value' 可能是 'undefined'.ts(18048)

这是我的相关代码 sn-ps：

模板：

<a-form
        ref="formRef"
        :model="DataCreate"
        name="form_in_modal"
        :validate-messages="validateMessages"
      >
        <a-form-item
          :name="['new', 's3Account']"
          label="s3Account"
          :rules="[{ required: true }]"
        ></a-form-item>
        ...
</a-form>

脚本：

import { ref, h, computed, onMounted, reactive, toRaw } from "vue";
import type { FormInstance } from "ant-design-vue";

const formRef = ref<FormInstance>()
const visibleCreate = ref<boolean>(false)

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

我在开始使用 TypeScript 时遇到了问题，希望能得到你们的帮助。非常感谢

【问题讨论】：

标签： typescript vuejs2 vuejs3

【解决方案1】：

那是因为你没有在构造时给它一个默认值，因此它的类型被“扩展”为还包括undefined，这是没有提供时的默认值。

如果这是初始化它的理想方式，您可以使用断言链接myRef!.value（这对打字稿说“虽然类型说它可以为 null 或未定义，但它不会，或者如果它确实让它失败）。

否则你也可以使用可选的链接myRef?.value（这对打字稿说只有当值既不是null也不是undefined时才调用该方法）。

【讨论】：