Skip to content

Vue typescript component class function decorator can not access extends mixin class method #618

Open
@chenp1204

Description

@chenp1204

Environment version:
vue @2.6.13
vue-class-component @7.2.3
vue-property-decorator @9.1.2
typescript @4.1.5

Description:

My vue component class named AudioBarChart,and extends a mixin component class named MaleonComponentMixin,the same time,i define a function decorator named RestTimerDecorator, in the RestTimerDecorator i called the mixin component class's method named resetDataTimer.
When i use RestTimerDecorator in component class AudioBarChart's method updateData,

but when call updateData method, RestTimerDecorator inside report a error: "TypeError: target.resetDataTimer is not a function"

the decorator's target not contains it's parent class property ?

import { Component, Vue, Prop, Mixins } from 'vue-property-decorator';

export interface IMaleonComponent {
    updateData(): void;
}

@Component
export class MaleonComponentMixin extends Vue {
    @Prop({ default: false })
    preview!: boolean;

    private autoReq: boolean = false;

    // 启动数据定时器
    startDataTimer() {
      console.log('startDataTimer');
    }

    resetDataTimer() {
      this.autoReq && this.preview && this.startDataTimer();
    }
}

// 装饰器函数
export function RestTimerDecorator() {
  return (target: MaleonComponentMixin, propertyKey: string, descriptor: PropertyDescriptor) => {
    const currentFunc = descriptor.value;
    if (currentFunc && typeof currentFunc === 'function') {
      descriptor.value = (...args: []) => {
        
        // 在调用updateData之前先重置定时器
        target.resetDataTimer();

        (currentFunc as ()=>void).apply(target, args);
      };
    }
  };
}

@Component
export default class AudioBarChart extends Mixins(MaleonComponentMixin) implements IMaleonComponent {
  
  @RestTimerDecorator()
  updateData(): void {
    console.log('updateData');
  }
}

test-mixin

image

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions