kaorun343 / vue-property-decorator

Vue.js and Property Decorator
MIT License
5.52k stars 380 forks source link

wrong with Component in typescript3.9 #327

Closed aoi-umi closed 3 years ago

aoi-umi commented 4 years ago

Describe the bug A clear and concise description of what the bug is.

To Reproduce Steps to reproduce the behavior:

@Component
export class Base extends {}

@Component({
    extends: Base,
})
export class Comment extends Vue<Base> {}

Expected behavior

Unable to resolve signature of class decorator when called as an expression.
  Type 'VueClass<Vue>' is not assignable to type 'typeof Comment'.
    Types of parameters 'options' and 'options' are incompatible.
      Type 'ThisTypedComponentOptionsWithArrayProps<Vue, Base, object, object, never>' is not assignable to type 'ThisTypedComponentOptionsWithArrayProps<Vue, any, any, any, any>'.
        Type 'ThisTypedComponentOptionsWithArrayProps<Vue, Base, object, object, never>' is not assignable to type 'ComponentOptions<Vue, any, any, any, any[], Record<any, any>>'.
          Types of property 'computed' are incompatible.
            Type 'object' is not assignable to type 'Accessors<any>'.
              Index signature is missing in type '{}'.

Desktop (please complete the following information):

Additional context it work fine in typescript 3.8.2 but error in typescript 3.9.4

kaorun343 commented 3 years ago

@aoi-umi

The better way to extend existing Component is

@Component
export class Component extends Base {}

Thanks.

aoi-umi commented 3 years ago

@aoi-umi

The better way to extend existing Component is

@Component
export class Component extends Base {}

Thanks.

i do this for the tsx prop

forexample:

interface VueComponentOptions {
    ref?: any;
    class?: any;
    style?: { [key: string]: any };
    props?: any;
    slot?: string;
    name?: string;
}

export function convClass<prop>(t) {
    return t as {
        new(props: prop & VueComponentOptions): any
    };
}

//conv prop
export function getCompOpts(target) {
    const Ctor = typeof target === 'function'
        ? target
        : target.constructor;
    const decorators = Ctor.__decorators__;
    const options: any = {};
    if (decorators) {
        decorators.forEach(function (fn) { return fn(options); });
    }
    return options;
}

class CompProp {
    @Prop({ required: true })
    req: string;

    @Prop({ required: false })
    notReq?: string;
}

@Component({
    mixins: [getCompOpts(CompProp)]
})
export class CompMain extends Vue<CompProp> {
}

export const Comp = convClass<CompProp>(CompMain);

finally i can write tsx with code hints img or do u have a better way? do u know what i mean?