Guide on creating a decorator for asynchronous functions that runs exclusively when using `Promise.resolve()`?

This decorator is specifically designed for analytics that triggers an event when a Promise is successfully resolved.

class Foo {

  @LogEvent("success")
  async bar() {

    await someAction();

  }

}

After researching online, it seems like I need to access the function descriptor to determine if it is asynchronous or not. However, there could be complications with TypeScript marking certain async methods as non-async and it may vary based on which version of EcmaScript is being targeted. Despite these challenges, I believe there must be a reliable solution out there.

What are your thoughts?

angulartypescriptasync-awaittsctypescript-decorator

Answer №1

How about trying this approach:

function LogEvent(param: string) {
    return (target: any, propertyKey: string, descriptor: TypedPropertyDescriptor<(... params: any[])=> Promise<any>>) => {
        let oldFunc = descriptor.value;
        descriptor.value = async function (){
            const result = await oldFunc.apply(this, arguments);
            await analytics.send(param);
            return result;
        }
    }
}

This idea was inspired by a discussion on Stack Overflow regarding decorating async functions in TypeScript

By implementing the Decorator in such a way, it specifically targets async methods only. Could you provide some evidence to support your claim that TypeScript flags certain async methods as non-async?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Sign up for the completion event within the datetime picker feature in Ionic 2

How can I subscribe to the "done" event in Ionic2, where I want to trigger a function after selecting a date? <ion-icon class="moreicon" name="funnel"> <ion-datetime type="button" [(ngModel)]="myDate" (click)="getData()"></ion-datetime> ...

angulartypescriptionic-frameworkionic2

Leveraging jest for handling glob imports in files

My setup involves using webpack along with the webpack-import-glob-loader to import files utilizing a glob pattern. In one of my files (src/store/resources/module.ts), I have the following line: import '../../modules/resources/providers/**/*.resource. ...

javascripttypescriptjestjsglobts-jest

Ways to Resolve the "TS2533: Object May Be Either 'Null' or 'Undefined'" Error on a Dynamic Object

I'm encountering an issue with the following code snippet: interface Schema$CommonEventObject { formInputs?: { [key: string]: Schema$Inputs; } | null; } interface Schema$Inputs { stringInputs?: Schema$StringInp ...

typescripttypesinterface

Ensuring Proper Tabulator Width Adjustment Across All Browser Zoom Levels

<div id="wormGearTabulatorTable" style="max-height: 100%; max-width: 100%; position: relative;" class="tabulator" role="grid" tabulator-layout="fitDataTable"><div class="tabulator-header" role="rowgroup"><div class="tabulator-header-co ...

javascriptcssangulartypescripttabulator

Tips for referencing functions in TypeScript code

In regard to the function getCards, how can a type be declared for the input of memoize? The input is a reference to a function. import memoize from "fast-memoize"; function getCards<T>( filterBy: string, CardsList: T[] = CardsJSON.map((item, i ...

typescriptmemoizationtypescript-generics

What is the best way to streamline the creation of a "products filter" using Node.js and Angular?

I have decided to build an angular application for an online computer store, and I am using a node/express backend. One of the key features of the application is the products page, where users can view all the products available in our database. Each produ ...

javascriptnode.jsangularmongodb

What is the best way to modify a particular internal route parameter within Angular 2?

In the midst of creating a versatile calendar that can showcase various types of data, I have devised a unique URL structure to guide me: todo/2017/01/01 showcases daily todos birthdays/2017/01/01 displays birthdays for that particular day todo/2017/01 g ...

angulartypescriptangular2-routing

Accessing JSON data from a database using Angular

Wondering if there is a way to effectively access and manipulate JSON data stored in a database using Angular. While researching online, I keep coming across methods for reading JSON files from the Asset Folder, which does not align with what I need. What ...

jsonangulartypescriptfileread-write

Diving into Angular2 template forms: unraveling the mysteries of the reset function

After going through the template forms tutorial in Angular2, I'm facing a bit of confusion regarding the behavior of the native reset JavaScript function on Angular2 ngModel. While it's not explicitly clarified in the official documentation, my u ...

javascriptangular

Utilize Moment to retrieve the weekend dates

Currently tackling a date-related issue and feeling stuck. Is it feasible to extract weekends from an array of dates using Moment.js instead of the getDay() method? I'm a beginner in JavaScript. ...

angularmomentjs

Encountering a Typescript error while attempting to iterate through Enum keys for generating JSX components

I'm really struggling with this problem. Here's a simple enum I have: export enum depositTypes { ACH = 42, Wire = 36, Check = 3, Credit = 2, } I'm trying to create option tags for a select element, like so: Object.keys(depositTyp ...

javascriptreactjstypescriptenumsmapping

The program was expecting an array to start, but instead encountered an object. Any suggestions on how to convert

{ "workingHours": [ { "date":"2023-02-01", "amount":3, "freigegeben":false } ] } Whenever I include this in my re ...

arraysjsontypescriptobject

Angular Error: Cannot call function panDelta on this.panZoomAPI

Check out my small demonstration using a stackblitz, I'm having an issue. In the setup, there's a master component with pan-zoom functionality containing a parent component with children content. The library in use is ngx-panzoom. The default c ...

angulartypescriptangular2-changedetectionpanzoom

Shared validation between two input fields in Angular 2+

I have a unique task at hand. I am working on creating an input field with shared validation. The goal is to ensure that both fields are technically required, but if a user fills in their email address, then both fields become valid. Similarly, if they ent ...

htmlangulartypescript

I'm having trouble setting a value for an object with a generic type

I am attempting to set a value for the property of an object with generic typing passed into a function. The structure of the object is not known beforehand, and the function receives the property name dynamically as a string argument. TypeScript is genera ...

typescripttypescript-genericsindex-signature

Leveraging File functionality in TypeScript

In the process of developing a web application with Angular 4 and Typescript, I encountered an issue while attempting to retrieve the date of a file for upload. Specifically, when trying to access the lastModified property of a File object, Typescript retu ...

angulartypescript

Troubleshooting problems with primeng using angular-cli and webpack

In a starter project using Angular 2, angular-cli@webpack, and PrimeNG, I am encountering errors. The only UI component from PrimeNG in use is a dropdown that renders properly with its values, but the CSS theme is not being applied (see error messages belo ...

node.jsangularhttp-status-code-404angular-cliprimeng

Achieving asynchronous results in the parent function with TypeScript: a guide

The code structure provided is as follows: import {socket} from './socket'; class A{ Execute(...args[]){ //logic with Promises SomeAsyncMethod1().then(fulfilled1); function fulfilled1(){ SomeAsyncMethod2(args).then(fulfilled2); ...

javascripttypescript

Communication between components through a shared service

Imagine you find yourself in one component and need to trigger a method from another component. There are multiple ways to achieve this, which are explained in more detail on this page. Here, I will demonstrate the simplest possible example of how to make ...

angular

When selecting a MenuItem, only a ReactOwner has the ability to add a ref using addComponentAsRefTo(...)

I'm currently working on a basic component that looks like this: class App extends React.Component<{}, {}> { constructor() { super(); } render() { return ( <MuiThemeProvider muiTheme={muiTheme}> <div> ...

reactjstypescriptmaterial-ui