Struggling to incorporate a pause decorator into my application, I encountered difficulties while trying to understand a related issue

Question

Struggling to incorporate a pause decorator into my application, I encountered difficulties while trying to understand a related issue

I am currently working with a service file that contains the following:

export class MockDataService {
   data:[] = [];

   getAll(): Observable<any[]> { return of(this.data); }
}

To introduce a delay to my mocks, I decided to use a @pause() decorator to wrap around all the functions:

export async function pause() {
    await new Promise( res => setTimeout(res, 1500) );
}

In order to add a pause of 1.5 seconds to all endpoints, I applied it to the getAll() function like so:

@pause()
getAll() {}

However, I encountered an error message when using it in my code. The error stated:

Unable to resolve signature of method decorator when called as an expression. Cannot invoke an expression whose type lacks a call signature. Type 'Promise<void>' has no compatible call signatures.

I am currently trying to understand why my function signatures might be incorrect. Additionally, I plan to use Http calls within these functions, so I believed I had the correct function definition.

angular typescript decorator

Answer 1

Answer №1

The reason for the error you are encountering is due to the specific signature that the Method decorator must adhere to:

declare type MethodDecorator = <T>(target: Object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>) => TypedPropertyDescriptor<T> | void;

The Method decorator cannot return a Promise<void>. It is required to either return TypedPropertyDescriptor<T> or be void. Since you are working with Observable<>, you should utilize the delay operator from rxjs/operators:

export function observablePause(
  target: Object,
  propertyName: string,
  propertyDesciptor: PropertyDescriptor): PropertyDescriptor {
  const method = propertyDesciptor.value;

  propertyDesciptor.value = function (...args: any[]) {

      // execute the decorated method and capture its return value
      let result = <Observable<any>>method.apply(this, args);
      // introducing a delay
      result = result.pipe(delay(1500));
      // return the result of the method invocation
      return result;
  }
  return propertyDesciptor;
};
...
@observablePause
getAll(): Observable<any[]> { return of(this.data); }

Answer 2

The reason for the error you are encountering is due to the specific signature that the Method decorator must adhere to:

declare type MethodDecorator = <T>(target: Object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>) => TypedPropertyDescriptor<T> | void;

The Method decorator cannot return a Promise<void>. It is required to either return TypedPropertyDescriptor<T> or be void. Since you are working with Observable<>, you should utilize the delay operator from rxjs/operators:

export function observablePause(
  target: Object,
  propertyName: string,
  propertyDesciptor: PropertyDescriptor): PropertyDescriptor {
  const method = propertyDesciptor.value;

  propertyDesciptor.value = function (...args: any[]) {

      // execute the decorated method and capture its return value
      let result = <Observable<any>>method.apply(this, args);
      // introducing a delay
      result = result.pipe(delay(1500));
      // return the result of the method invocation
      return result;
  }
  return propertyDesciptor;
};
...
@observablePause
getAll(): Observable<any[]> { return of(this.data); }

Answer 3

Answer №2

If you use this code, you will receive your wait time, but it is possible that there are other issues to consider with the observable response.

@Injectable({
  providedIn: 'root'
})
export class MockDataService {

  data: [] = [];

  @delay()
  downloadData() {
    return this.data;
  }

  getAll(): Observable<any[]> {
    return of(this.downloadData());
  }

  constructor() {
  }
}

export function delay(): MethodDecorator {
  return function(target: Function, key: string, descriptor: any) {

    const originalMethod = descriptor.value;

    descriptor.value =  async function(...args: any[]) {
      console.log('Entering Wait!');
      await new Promise(res => setTimeout(res, 1500));
      console.log('Completed Wait!');
      return originalMethod.apply(this, args);
    };

    return descriptor;
  };
}

Answer 4

If you use this code, you will receive your wait time, but it is possible that there are other issues to consider with the observable response.

@Injectable({
  providedIn: 'root'
})
export class MockDataService {

  data: [] = [];

  @delay()
  downloadData() {
    return this.data;
  }

  getAll(): Observable<any[]> {
    return of(this.downloadData());
  }

  constructor() {
  }
}

export function delay(): MethodDecorator {
  return function(target: Function, key: string, descriptor: any) {

    const originalMethod = descriptor.value;

    descriptor.value =  async function(...args: any[]) {
      console.log('Entering Wait!');
      await new Promise(res => setTimeout(res, 1500));
      console.log('Completed Wait!');
      return originalMethod.apply(this, args);
    };

    return descriptor;
  };
}

Struggling to incorporate a pause decorator into my application, I encountered difficulties while trying to understand a related issue

Answer №1

Answer №2

Similar questions

Using Typescript to reduce an array of objects results in concatenation

Employing async/await for efficient data retrieval

What could be the reason my component is not displaying the ContentChild associated with a directive?

What is the best way to leverage the Nextjs Link tag while also incorporating the data-dismiss attribute?

Tips for integrating JavaScript libraries into TypeScript build process in Visual Studio

Is there an alternative to RequestOptionsArgs that I can use in this function?

Passing data to a redirected route in Angular using the redirectTo parameter

limit the data types of values within an object using Typescript

AngularFire UPDATE -> APPLY CHANGES

Guide on updating a property key in Firebase real-time database with Angular 7

The incorrect type is being assigned to an array of enum values in Typescript

Tips for showcasing JSON data in an HTML table or list

TypeScript Error 2304: Element 'div' is nowhere to be found - CRA TypeScript Template

Despite being listed in the entry components, HelloComponent is not actually included in the NgModule

Angular form submission encountered an error

Tips on integrating Ionic 2 with Angular 2 services

Validating React components with TypeScript using an array structure where the field name serves as the key

In the CallableFunction.call method, the keyword "extends keyof" is transformed into "never"

Which types of mouse events are compatible with Angular2?

The response URL in Angular 2 is logged character by character instead of as one complete string