Typescript's approach to function decorators in their original form

I have a basic decorator function in Python that I am using to decorate another function.

def decorator(fn):
    def wrapper(args):
        print("calling function")
        fn(args)
    return wrapper


@decorator
def printMyName(name):
    print(name)

printMyName('pengooX')

When attempting to create something similar in TypeScript, an error is generated. Below is the code:


function decorator(fn){
    function wrapper(args){
        console.log("calling function")
        fn(args)
    }
    return wrapper
}


@decorator
function printMyName(n){
    console.log(n)
}

printMyName('pengooX')

I am curious if raw function decorators are supported in TypeScript and, if not, what potential issues could arise from this. Upon checking the TypeScript documentation, I found no mention of raw function decorators: documentation.

Answer №1

The current proposal for decorators by TC39 focuses on applying decorations to classes and their members. More information can be found here. An extension document suggests the possibility of extending decorator support to functions, although this is not yet part of the standardization.

While TypeScript previously had its own version of decorators that were based on a past failed standard proposal, it is advised against using these outdated decorators for new projects.

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

Angular 2 TypeScript: Accelerating the Increment Number Speed

I'm working with a function in Angular 4 that is triggered when the arrow down key is pressed. Each time the arrow down key is hit, the counter increments by 1. In this function, I need to run another function if the counter reaches a certain speed. ...

The combination of Sequelize and TypeScript does not support the usage of the .create method with type attributes

The IDBAttribute - interface IDBAtribute { readonly id: number; readonly createdAt: Date; readonly updatedAt: Date; } User attributes defined as IDBMoviesAttributes - interface IDBMoviesAttributes extends IDBAttribute { readonly title: str ...

How come I am unable to retrieve a field within a method of the same class?

Here is a snippet of the code from my component: export class RootComponent { isActive = true; setVal(j) { if (j == 0) { isActive = false; } } } I am new to Angular and I have a question that might seem basic. Why am I unable to acce ...

Observable - initiating conditional emission

How can I make sure that values are emitted conditionally from an observable? Specifically, in my scenario, subscribers of the .asObservable() function should only receive a value after the CurrentUser has been initialized. export class CurrentUser { ...

What is the reasoning behind leaving out wwwroot from tsconfig?

Currently, I am working on a TypeScript project using an ASP.NET 5 template in VS.NET 2015. In the scripts/tsconfig.json file that I added, there is a default exclude section which includes: "exclude": [ "node_modules", "wwwroot" ] However, a ...

Is there a way to reset the yAxes count of a chart.js chart in Angular when changing tabs?

I am currently using chart.js within an Angular framework to visually display data. Is there any method available to reset the y-axis data when changing tabs? Take a look at this Stackblitz demo for reference. Upon initial loading of the page, the data ...

Formik button starts off with enabled state at the beginning

My current setup involves using Formik validation to disable a button if the validation schema is not met, specifically for a phone number input where typing alphabets results in the button being disabled. However, I encountered an issue where initially, ...

What's up with the strange event handling in Angular2?

How can a draggable vertical bar be created with Angular2? Setting isDragging to true when the user clicks it and calling moveHandler when the mouse moves seems straightforward, but there are a couple of issues: When the if-condition in ngOnInit is true, ...

What could be the reason for the react hook form failing to capture the data upon submission?

I am struggling to access the props' value after clicking the button, as it keeps returning undefined. My goal is to display the years of service and profession details based on the user's selection. return ( <form onSubmit={handleSubmit(o ...

Creating an Object with Quoted Key in JavaScript/Typescript for MongoDB's '$push' Feature

Struggling to format the data in order to add an element into a nested array within MongoDB. Currently attempting this in TypeScript: var data = {$push:{"foo.12.bar":{ prop1: prop1, prop2: prop2, // referenced values above this code snippet ...

What exactly is the purpose of the colon in JavaScript's import statement?

Looking at the following example. import { QueryClientContract, TransactionClientContract } from '@ioc:Adonis/Lucid/Database' I am puzzled by the use of colons and I am unsure about where the imported files are being referenced from. ...

issue occurring after inserting a new parameter

I encountered an issue with my test case after adding a new parameter tiger to the method swimming. Despite passing the new parameter tiger to my test case, it continues to break. Update: I am receiving an "undefined grid" error at this line. Any suggest ...

When utilizing a generic schema as an argument in Typescript with Zod, the spread operator can sometimes circumvent the type checking process

My goal is to create a function that validates an object against a Zod schema in TypeScript. However, I have encountered an issue where TypeScript does not seem to properly validate the object when using a spread operator. In the scenario below, the funct ...

Encountering an issue while upgrading to Angular 10: Unable to interpret "tsconfig.json" as a valid JSON AST Object

I'm currently updating my Angular 9 app to Angular 10 and encountering this error: > Removing "Solution Style" TypeScript configuration file support. × Migration failed: Failed to parse "tsconfig.json" as JSON AST Object. PropertyNameExpected at l ...

Is there a way to retrieve the modal's viewport height in Angular?

Is it possible to determine the viewport height of my ng bootstrap modal within my Angular application? Here is what I currently have: I have a modal with CSS styling as shown below: .modal-xxl { width: 95% !important; max-height: 90% !important; ...

update the element that acts as the divider in a web address (Angular)

Is it possible to modify the separator character used when obtaining the URL parameters with route.queryParams.subscribe? Currently, Object.keys(params) separates the parameters using "&" as the separator. Is there a way to change this to use a differe ...

Webpack resolve.alias is not properly identified by Typescript

In the Webpack configuration, I have set up the following: usersAlias: path.resolve(__dirname, '../src/pages/users'), In my tsconfig.json, you can find: "baseUrl": ".", "paths": { "usersAlias/*": ["src/pages/users/*"], } This is how the cod ...

The module does not contain 'toPromise' as an exported member in rxjs version 5.5.2

Encountering an error when using toPromise Prior method: import 'rxjs/add/operator/toPromise'; Updated approach: import { toPromise } from 'rxjs/operators'; The new way is causing the following issues: [ts] Module '"d:/.../ ...

The status of the 'slider' may be 'undefined'

I'm really struggling to figure out how to resolve this issue, even though I suspect it's a simple fix that's eluding me... Here is the part of my code in TypeScript that's causing the error: const slideLeft = () => { cons ...

Utilizing IonicSafeString for Alert Box Messages in Event Handling

.ts private async displayTermsOfServiceAlert(): Promise<void> { const alert = await this.alertController.create({ header: 'Updated Terms of Service', //problem lies here message: new IonicSafeString(`<ion-button i ...