ts踩坑!无法确定在联合类型 Partial<FormConfContentType> | Partial<configType> 中哪一个类型包含了你正在尝试访问的属性

5 篇文章 0 订阅
const fillFormData = (form: Partial<FormConfContentType> | Partial<configType>, data: Record<string, any>): void => {
    const arr = form.fields ? form.fields : form.children
    arr && arr.forEach(item => {
        if (item.__vModel__) {
            const val = data[item.__vModel__]
            if (val) {
                item.__config__ && (item.__config__.defaultValue = val)
            }
        } else if (item.__config__ && item.__config__.children && item.__config__.children.length > 0) {
            fillFormData(item.__config__, data)
        }
    })
} 

在方法中参数form可以接受两种类型结构的值,arr根据参数的值判断取哪个结构的值的属性,
导致ts类型报错类型“Partial<configType> | Partial<{ formRef: string; formModel: string; size: EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", unknown> | undefined; ... 9 more ...; fields: Partial<...>[]; }>”上不存在属性“fields”。
类型“Partial”上不存在属性“fields”,类型“Partial”上不存在属性“children”。ts-plugin(2339)

在 TypeScript 中,当你尝试访问一个可能不存在的属性时(比如 fields 或 children),你会遇到类型错误,因为 TypeScript 无法确定在联合类型 Partial | Partial 中哪一个类型包含了你正在尝试访问的属性。

要解决这个问题,你需要对 form 参数进行类型断言或者类型守卫,以确保在访问属性之前,你知道 form 一定是某个具体的类型。

下面是一个可能的解决方案,它使用了类型守卫(通过检查 fields 或 children 是否存在来区分两种类型):

// 假设你有一个可以检查form是否是FormConfContentType类型的守卫函数
function isFormConfContentType(form: any): form is Partial<FormConfContentType> {
    return (form as Partial<FormConfContentType>).fields !== undefined;
}

const fillFormData = (form: Partial<FormConfContentType> | Partial<configType>, data: Record<string, any>): void => {
    let arr: Partial<FormConfContentType>['fields'] | Partial<configType>['children'][] | undefined;

    // 使用类型守卫来确定form的类型
    if (isFormConfContentType(form)) {
        arr = form.fields;
    } else {
        arr = form.children;
    }

    if (arr) {
        arr.forEach(item => {
            // 接下来,你可能还需要一个类型守卫来确保item具有__vModel__或__config__属性
            // 因为item可能是Partial<FormConfItemType>或其他类型,取决于你的FormConfContentType和configType定义

            if (('__vModel__' in item) && item.__vModel__) {
                const val = data[item.__vModel__];
                if (val) {
                    // 同样,这里我们需要确保item.__config__存在
                    if (item.__config__) {
                        item.__config__.defaultValue = val;
                    }
                }
            } else if (item.__config__ && item.__config__.children && item.__config__.children.length > 0) {
                // 注意:这里我们假设item.__config__总是Partial<configType>
                fillFormData(item.__config__, data);
            }
        });
    }
};

请注意,上面的代码假设你有一个可以区分 FormConfContentType 和 configType 的方式。你可能需要根据你的实际类型定义来调整 isFormConfContentType 函数。

另外,我还添加了对 item.config 存在的检查,以避免在 item.config 不存在时尝试访问其属性。在实际代码中,你可能还需要为 item 添加更多的类型守卫来确保你安全地访问其属性。

  • 4
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值