Struggling to find the definition of a Typescript decorator after importing it from a separate file

Consider the following scenario:

decorator.ts

export function logStuff(target: Object, key: string | symbol, descriptor: TypedPropertyDescriptor<any>) {
    return {
        value: function (...args: any[]) {
            args.push("Another argument added");
            descriptor.value.apply(target, args);
        }
    };
}

Shell.ts

// Other imports excluded for simplicity
import logStuff = require("utils/log-decorator");

class Shell extends AnotherClass {
    constructor() {
        super();
        this.fooMethod("arg1");
    }

    @logStuff
    private fooMethod(arg1: string, arg2?: string) {
        console.log(`Arguments from original function: ${JSON.stringify(arguments)}`);
    }
}

export = Shell;

An issue arises with the message (file path shortened):

Unable to resolve signature of method decorator when called as an expression. Cannot invoke an expression whose type lacks a call signature. Type 'typeof "/utils/log-decorator"' has no compatible call signatures

Moving the function to the top of Shell.ts eliminates errors. Any recommendations on resolving this?

Answer №1

The function logStuff can be accessed as an exported member of the module. To do so, you need to access it like this:

import logStuffModule = require("utils/log-decorator");
//...
@logStuffModule.logStuff
private fooMethod(arg1: string, arg2?: string) { ... }

Alternatively, you can use ES6-style imports:

import { logStuff }  from "utils/log-decorator";

// ...
@logStuff
private fooMethod(arg1: string, arg2?: string) { ... }


You also have the option to modify your module by setting the export object as your function and using it in a similar way:

// decorator.ts
export = function logStuff() {}

// Shell.ts    
import logStuff = require("utils/log-decorator");

// ...
@logStuff
private fooMethod(arg1: string, arg2?: string) { ... }

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

Can a javascript variable be accessed after loading an iframe and returning to the page?

Using a jquery plugin known as colorbox, my colorbox simply opens an iframe on the screen. This detail may not be relevant, as the core issue at hand is that I have 3 variables on my parent window that are retrieved from an AJAX call using jquery: data.re ...

Exploring the Validation of POST Requests with JSON Content

When working with NodeJS and Express 4, I often come across situations where the client sends JSON data that needs to be processed: { "data" : "xx" "nested" : { field1: "111", field2: "222" } } However, on the server side, I ...

Utilizing Angular Font Awesome within the google.maps.InfoWindow feature

Showcasing a Font Awesome 5 icon within a Google Maps Info Window (API) Font Awesome 5 functions correctly in my Angular application when utilized in the HTML templates. However, when using the google.maps.InfoWindow outside of Angular, I encounter diffic ...

The dropdown feature stores and displays only the initial value

After resolving my previous question (link), I am now facing a new issue where the value of the name field is only reflecting the first item in the dropdown list. Let me explain further. I have two dropdown menus, where selecting an option in one (A) dyna ...

Looking for a way to choose an Object using the key value in VueJS?

In my Vuejs setup, there is an object containing various fields including an email value which looks like this: "[email protected]". { "fields": [ { "label": "email", "value": "<a href="/cdn-cgi/l/email-protection ...

How to execute a JavaScript function within a Jinja for loop

I am currently working on an HTML page where the variable schedule contains a series of sequential decimal numbers representing seconds. My goal is to develop a function in JavaScript/jQuery that can convert these decimal numbers into time format. However ...

Using the "this" keyword in JavaScript to access the "rel"

Take a look at the JSFIDDLE , where you will notice that the rel attribute in the alert is shown as 'undefined' : var ItemTypeArray = $('input[name^=ItemType]:checked').map(function(){ alert(this.id + ' , r= ' + this.rel) ...

Encountering the error "Module 'aws-sdk', 'child_process', 'net' cannot be resolved" within the /node_modules/watchpack directory when using Webpack

I'm encountering issues while trying to compile my prod webpack file, specifically receiving 5-10 errors related to "cannot resolve module" aws-sdk and child_process. All of these errors seem to point back to the same path: "ERROR in (webpack)/~/watc ...

What type of HTML tag does the MUI Autocomplete represent?

Having trouble calling a function to handle the onchange event on an autocomplete MUI element. I've tried using `e: React.ChangeEvent`, but I can't seem to locate the element for the autocomplete component as it throws this error: The type &apos ...

Assign the filename to the corresponding label upon file upload

I've customized my file uploader input field by hiding it and using a styled label as the clickable element for uploading files. You can check out the implementation on this jsFiddle. To update the label text with the actual filename once a file is s ...

Patience is key as we anticipate the parent component/module loading the data

Just a note: I am aware of the existence of APP_INITIALIZER, but it appears to only work in the top-level module (app.module.ts) of the application. I have a parent component that loads some data: In admin-area.component.ts: ngOnInit(): void { forkJo ...

Encountering issues with saving information to MongoDB

I recently started working with the MERN stack and I am trying to save user information in MongoDB, which includes two string attributes: "name" and "role". However, I encountered an error in the browser console stating "Failed to load resource: Request t ...

Disable object rotation when hovering the mouse over it in three.js

I've created a function to prevent the rotation of a three.js object when the mouse hovers over it. function onDocumentMouseUp( event ) { event.preventDefault(); mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1; mouse.y = - ( event.clientY / w ...

Contrast the positions (offsets) of two elements

I am trying to determine if one element is positioned above another by comparing their offset positions. Specifically, I need to verify whether the me element is within the bounds of the screen element using their respective offset positions. HTML Code ...

React.js "universal" component that is able to be generated multiple instances of

I'm struggling to fully understand this problem. Here's the issue: imagine there is an app where I need to generate notifications, dialogs, or other similar elements from my code. One option is to have a "global" component that controls everyth ...

Discovering the current time and start time of today in EST can be achieved by utilizing Moment.js

Need help with creating Start and End Time stamps using Moment.js in EST: Start Time should reflect the beginning of today End Time should show the current time. This is how I have implemented it using moment.js: var time = new Date(); var startTime=D ...

Guide to configuring the active Tab in Angular 6 using Angular Material Design

I've searched high and low for a solution to this issue, but I haven't been able to find one. In a particular component, I have a material tab control. However, the active tab doesn't display until I click on one of the tabs on the page. a ...

JavaScript program that continuously reads and retrieves the most recent data from a dynamically updating JSON file at regular intervals of every few seconds

I am a beginner in JavaScript and I'm facing an issue with displaying the most recent values from a .json file on an HTML page. The file is updated every 10 seconds, and I am also reading it every 10 seconds, but I'm not getting the latest data. ...

Can you provide guidance on securing a REST API using Google authentication?

I'm currently working on developing a REST API using NodeJS and Passport for a single-page JavaScript application. I am struggling to find the right approach to securing my REST API with Google OAuth. Can someone guide me on how to achieve this? Any ...

Customizing Vue: Implementing an automatic addition of attributes to elements when using v-on:click directive

We are currently working with single file Vue components and we're facing a challenge in our mousemove event handler. We want to be able to determine if the target element is clickable. Within our Vue templates, we utilize v-on directives such as: v- ...