Is it possible to specify the timing for executing Typescript decorators?

One issue I've encountered is that when I define a parameterized decorator for a method, the decorator runs before the method itself. Ideally, I'd like the decorator to run after the method has been called.

 function fooDecorator(value: boolean) {
  console.log('fooDecorator initialized');
  return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  };
}

class Foo{

  @fooDecorator(true)
  foo(){

  }

}

app.listen(5000, () => console.log("server started"));



// Output 
fooDecorator initialized
server started

Answer №1

During the initialization of a class in TypeScript, method decorators are executed to modify the method. More information can be found in the documentation. If you need a decorator to perform an action when the method is invoked, you can encapsulate the method in another function within the decorator:

function fooDecorator(flag: boolean) {
    return function (target: any, propertyKey: string; descriptor: PropertyDescriptor) {
        const original = target[propertyKey];
        return {
            ...descriptor,
            value(...args: any[]) {
                console.log("Inserted behavior, flag = " + flag);
                return original.apply(this, args);
            }
        }
    };
}

class Foo{
    @fooDecorator(true)
    foo(){
        console.log("Original foo");
    }
}

const f = new Foo();
f.foo();

Playground link

Output:

Inserted behavior, flag = true
Original foo

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

Unusual shadow cast by the box's silhouette

I am currently facing an issue with a box and its shadow. When I close the box, a different shadow lingers behind. I have tried troubleshooting this problem but cannot pinpoint the source. I have included the relevant code files in the specified folders. I ...

Reload iframe content using a .php file within a different iframe

I am currently working on a page that consists of 7 different iframes: <iframe id="leftframe" src="structure/leftbar.php"></iframe> <iframe id="headerframe" src="structure/header.php"></iframe> <iframe id="menuframe" src="struct ...

I am facing issues with installing React Router on my Windows device

After running the command to install react-router, this is the output from my prompt window: npm install --save react-router The prompt window shows several warnings and optional dependencies: npm WARN @babel/core requires a peer of @babel/core@^7.13 ...

Encountering issues while attempting to run an npm install command on the package.json file

Having trouble running npm install to set up my Angular project on a Mac. It seems like the issues are due to working with an older project. npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: @angular-devkit/< ...

How can I access keys and values from an Observable within an Angular template?

Attempting to display all keys and values from an Observable obtained through Angular Firebase Firestore Collection. This is how I establish a connection to the collection and retrieve an Observable. The function is called subsequently. verOrden : any; ...

Implement varying styles in React components

In my React project, I am attempting to create a unique progress bar with custom styling. Specifically, I have a dynamically calculated percentage that I want to assign as the width of a div element. Initially, I tried achieving this using Tailwind CSS: &l ...

Is it possible to switch the summernote editor between airmode and toolbar mode?

Currently, I am working on creating a report editor that displays only one toolbar when multiple summernote WYSIWYG editor sections are used. My solution involves having the first section as a full editor and the other section in airmode. Below is the HTM ...

The best practices for utilizing getStaticProps with Firebase

I am completely new to Next.js and am struggling to make the getStaticProps function work properly. import firebase from '../firebase' export default function Home({ posts }) { return ( <div> <h1>All Posts</h1> ...

Is it possible to retrieve the controller path for an AJAX request from within a partial view?

Looking for a solution to fully decouple and reuse a partial view that allows users to select dates and filter results based on those dates. This widget can be used on multiple pages, so I wanted to add event listeners that would submit the form within the ...

Dropdown selection triggers an Ajax request

I have encountered an issue while attempting to make an Ajax request to the page chosen in a drop-down menu. While most of my script code works fine in binding a mouse click to table rows, it seems to fail in this particular scenario. The error message I r ...

Working with JavaScript and making AJAX calls to interact with PHP backend

Having trouble with this code, it's not working as expected. I want to pass the value when I select an option from the dropdown menu, process the data using onChange event and display the value in the tag. <label for="headmark" class="lbl-ui selec ...

data not corresponding to interface

I am encountering an issue that says Type '({ name: string; href: string; icon: IconDefinition; } | { name: string; href: string; icon: IconDefinition; childs: { name: string; href: string; icon: IconDefinition; }[]; })[]' is missing the followin ...

Can you define the "tab location" in an HTML document using React?

Consider this component I have: https://i.stack.imgur.com/rAeHZ.png React.createClass({ getInitialState: function() { return {pg: 0}; }, nextPage: function(){ this.setState({ pg: this.state.pg+1} ) }, rend ...

Ways to postpone a for loop in Jquery

Currently, I am working on creating an image gallery using a for loop to load all the images. However, I am facing an issue where the loop is running too fast, and I would like to add a delay after each iteration. I attempted to use a timeout function, bu ...

The CosmosClient's read() method will only return an object if both the ID and partition key value are provided

After setting up a CosmosDB instance and inserting a test object into the container products, with the partition key set to /price, I encountered an issue. The item added had the following properties: { "id": "1234", "name": "A DB product", "p ...

Ways to trigger rendering when the global variable value is updated?

#Code Block 1: let ticketEnabled = false; export default class SupportTicketMain extends Component { constructor () { super(); } render () { let expIcon = <DownIcon/>; if (this.state.ticketDetailExpand) { expIcon = <UpIcon ...

The administrator user assigns a user value in the authentication context, but that value remains hidden from the component where it was originally set

The authentication feature: import React, { useState } from 'react'; let selectedUserByAdmin = ''; const AuthContext = React.createContext({ setSelectedUserByAdmin: () => {}, selectedUserByAdmin, }); export const AuthContextPro ...

Is it possible to initialize multiple Observables/Promises synchronously in ngOnInit()?

I am relatively new to Angular/Typescript and facing a challenge. In my ngOnInit(), I am trying to fetch settings from my backend using a GET request. After that, I need to subscribe to an observable. The observable updates the widgets' content over t ...

What is the solution for fixing the error "Uncaught SyntaxError: Cannot use import statement outside a module" while using Chart consoletvs/charts:7.* in Laravel 8?

I have successfully completed all the steps outlined in the documentation. When using CDN links, everything functions as expected and I am able to load any chart. <script src="https://unpkg.com/chart.js/dist/Chart.min.js"></script> &l ...

Can importing a library generate a fresh copy of the imported library?

In my development setup using webpack and vue-loader to build a Vue.js application, I have various .vue files for different components. Whenever I include the line: import _ from 'lodash' in the script section of both ComponentA.vue and Compone ...