2

我有一个名为BusinessDetails. 我在另一个组件中使用这个组件，并且我已经将ref属性附加到它以访问它的属性和方法。如果我不给出refa 类型，则在访问它的方法时会出错"Object is possibly null"。我尝试将类型设置为BusinessComponent、typeof BusinessComponent、Vue.extend(BusinessComponent)等，但它们都会引发不同的错误。我最终决定将类型设置为any，并接受eslint警告。虽然这可以解决问题，但是否有合适的方法来做到这一点？

<q-layout view="hHh LpR lfr">
    <q-header>
        <q-toolbar>
            <q-btn flat round @click="$router.go(-1)" icon="arrow_back" aria-label="Back"/>
            <q-toolbar-title>Create Account</q-toolbar-title>
        </q-toolbar>
    </q-header>

    <q-page-container>
        <q-page>
            <business-details ref="businessDetails" />
        </q-page>
    </q-page-container>
</q-layout>

export default Vue.extend({
    name: "CreateAccount",
    components: {
        BusinessDetails
    },
    setup () {
        const businessDetails: Ref<any> = ref(null);

        const isCurrentPageValid = (page: number): Promise<boolean> => {
            switch (page) {
                case AccountGroup.BUSINESS:
                    return businessDetails.value.isValid();
                default:
                    return Promise.resolve(true);
            }
        };

        return {
            businessDetails,
            isCurrentPageValid
        };
    }
});
4

3 回答 3

1

您可以使用InstanceType<>：

const businessDetails = ref<InstanceType<typeof BusinessDetails> | null>(null);

这将为您输入BusinessDetails组件上定义的所有方法等。

然后使用它

businessDetails.value?.isValid();

它应该可以正常工作™。

这种类型的想法来自https://github.com/vuejs/vue/issues/8721中的许多响应

于 2020-11-27T15:38:58.847 回答
0

您可以使用包中的ComponentPublicInstance类型'vue'：

const businessDetails : Ref<ComponentPublicInstance | null> = ref(null);
于 2020-10-17T09:21:34.577 回答
0

您可以使用查找类型来指定组件的类型，如下所示：

type BusinessDetailsRef = Ref<
        typeof BusinessDetails['props']
      & typeof BusinessDetails['data']
      & typeof BusinessDetails['computed']
      & typeof BusinessDetails['methods']
      | null
    >

const businessDetails: BusinessDetailsRef = ref(null)

您可以选择仅包含您感兴趣的查找类型，以使其不那么冗长。

验证：

  • 打字稿 3.9.7
  • Vue 2.6.11
  • 从 Vue CLI 4.4.6 生成的项目（选择了 TypeScript 选项）
  • macOS 卡塔利娜
于 2020-07-22T02:24:28.240 回答