代码之家 › 专栏 › 技术社区 › DWJ

使用并集键入条件属性

flowtype

DWJ · 技术社区 · 7 年前

我在自定义上定义了以下方法 Component component 所有物如果该属性是 ref 否则,它将创建一个新实例 el 和 opts

setRef({ id, component, el, opts = {}, props = {} }: refConstructorType | refInstanceType): Promise<Component> {
    let ref: Component;

    if (component instanceof Component) { 
         ref = component
    } else {
        ref = new component(el, opts);
    }
}

我的类型定义 refConstructorType refInstanceType 是:

type refInstanceType = {|
    component: Component,
    id: string,
    props?: {}
|};

type refConstructorType = {|
    component: typeof Component,
    id: string,
    el: Element,
    opts ?: {[option_ke: string]: string},
    props ?: {}
|};

无论如何,flowtype正在抱怨:

86:     setRef({ id, component, el, opts = {}, props = {} }: refConstructorType | refInstanceType): Promise<Component> {
                    ^^^^^^^^^ Component. This type is incompatible with
86:     setRef({ id, component, el, opts = {}, props = {} }: refConstructorType | refInstanceType): Promise<Component> {
                    ^^^^^^^^^ class type: Component

src/index.js:86
86:     setRef({ id, component, el, opts = {}, props = {} }: refConstructorType | refInstanceType): Promise<Component> {
                    ^^^^^^^^^ class type: Component. This type is incompatible with
86:     setRef({ id, component, el, opts = {}, props = {} }: refConstructorType | refInstanceType): Promise<Component> {
                    ^^^^^^^^^ Component

src/index.js:86
86:     setRef({ id, component, el, opts = {}, props = {} }: refConstructorType | refInstanceType): Promise<Component> {
                                ^^ property `el`. Property not found in
86:     setRef({ id, component, el, opts = {}, props = {} }: refConstructorType | refInstanceType): Promise<Component> {
                                                                                ^^^^^^^^^^^^^^^ object type

src/index.js:86
86:     setRef({ id, component, el, opts = {}, props = {} }: refConstructorType | refInstanceType): Promise<Component> {
                                    ^^^^ property `opts`. Property not found in
86:     setRef({ id, component, el, opts = {}, props = {} }: refConstructorType | refInstanceType): Promise<Component> {
                                                                                ^^^^^^^^^^^^^^^ object type

2017年7月26日更新

setRef(refCfg: refConstructorType | refInstanceType): Promise<Component> {

    let ref: Component;

    if (!isPlainObject(refCfg)) {
        throw new Error('Invalid reference configuration');
    }

    if (refCfg.component instanceof Component) {
        ref = refCfg.component;
    } else if (typeof refCfg.component === 'function' && refCfg.el) {
        const { el, opts, component } = refCfg;
        ref = new component(el, opts); //eslint-disable-line new-cap
    } else {
        throw new Error('Invalid reference configuration');
    }
    // ....
}

1 回复 | 直到 7 年前

Lewis Chung 7 年前

你把流放在一个位置,要求它创建一个变量 component 带类型 Component | typeof Component 并询问该联合类型是否对 refConstructorType.component 并对 refInstanceType.component

Component == Component | typeof Component
typeof Component == Component | typeof Component ?

基本上,通过分解,它隐式地失败了“一进一出”: https://flow.org/en/docs/types/unions/#toc-union-types-requires-one-in-but-all-out

这就是为什么你看到Flow两次抱怨它。

一旦您解决了这个问题,其他错误很可能会通过确保流能够准确区分if/else中的不同条件来解决。