Utilizing TypeScript Class Inheritance: The Reference to 'super' is Only Allowed in Members of Derived Classes or Object Literal Expressions

We have encountered a scoping issue while using TypeScript classes with inheritance. It seems that TypeScript/JavaScript does not allow us to use 'super' within a promise structure or an enclosed function. The error message we are getting is:

TypeScript: 'super' Can Only Be Referenced in Members of Derived Classes or Object Literal Expressions

Is there a workaround for this problem? Below is the code snippet causing the issue:

export class VendorBill extends Transaction {
    constructor() {
        super();
    }

    save() {

        let deferred = $.Deferred();

        $.ajax({
            type: "GET",
            url: '/myrestapi',
            success: function (data) {    
                deferred.resolve();    
            },
            error: function (jqXHR: any, textStatus, errorThrown) {
                deferred.reject()
            }
        })

        $.when(deferred).always(function () {
            super.save();  <----------- THIS IS CAUSING THE ERROR
        })    
    }
}

Answer №1

The main issue lies in how the compiler transforms super.save() into:

_super.prototype.fn.call(this);

The problem arises because this does not refer to the correct context when passing a function.

To address this, you can utilize an arrow function:

$.when(deferred).always(() => {
    super.save();
}) 

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

Ensure that the loop is fully executed before proceeding with any additional code

Check out this code snippet I've been developing: let arrayB = []; for (let index = 0; index < res.length; index++) { let fooFound = false; const dynamicFoo = require(`./modules/${res[index]}`); rest.get(Routes.applicationCommands("BLA ...

Are you looking for a specialized jQuery Tree plugin with unique features and customization

Currently seeking a jQuery plugin with similar functionality to jQuery Multisortable. It should offer the following features: Split screen layout, with a tree structure menu on the left and content display on the right (similar to Windows Explorer). Abil ...

Steps to display a div on top of a background image

Here is a visual representation of my design for better understanding: I am currently working on developing the central content that overlays the image. However, when I insert divs with background colors into my HTML to test their placement, I do not see ...

Using three.js to create a rotating analog clock in Javascript

I currently have a traditional clock displayed in my setting that I want to synchronize with the current time. I am able to keep the clock running by calculating each hand's rotation every second, but I am encountering peculiar issues with the minute ...

Access the configuration of a web browser

I am in the process of creating a website where I need to prompt the user to enable JavaScript. Is there a way for me to include a link to the browser's settings page? Here is an example: <noscript> <div>Please enable JavaScript &l ...

Encountering issues while attempting to execute node-sass using npm

Currently, I'm attempting to execute node-sass using npm. Displayed below is my package.json: { "name": "my-project", "version": "1.0.0", "description": "Website", "main": "index.js", "scripts": { "sass": "node-sass -w scss/ -o dist ...

What is the process for switching directories and renaming a file when uploading in nodeJs?

I am currently using multer and fs to handle the upload of an image file. How can I modify the directory where uploaded files are stored? Currently, all files are saved in my "routes" folder instead of the "uploads" folder created by multer. Additionally, ...

Problems with select box rendering in Internet Explorer with Materialize CSS

When using materializecss select box in Internet Explorer 9 or higher, scrolling with the mouse button is not working. You must click on the scroll bar inside the select box for it to scroll. This issue does not occur in other browsers. I have attached a s ...

What is the proper technique for utilizing private fields in TypeScript?

Every time I attempt to execute the code below that involves a private field, I encounter an "Invalid character" issue at the location of #. class MyClass { #x = 10; } Here is the content of my tsconfig.json file: { "compilerOptions": { ...

Prevent excessive clicking on a div element

I am facing a simple issue that I haven't been able to resolve yet. I want to prevent multiple clicks on a button before an AJAX call is complete. This is what I have tried so far: <button id="btn_pay"></button> $("#btn_pay").click( fun ...

Unlock the Full Potential: Enabling Javascript's Superpowers through PHP Execution

I specialize in PHP and JavaScript. Currently, I am attempting to incorporate JavaScript functionalities into my PHP code. However, I am encountering an issue where the code is not functioning properly. The PHP code that executes the JavaScript code is as ...

Tips for handling Promise.all and waiting for all promises to resolve in an async function in Express JS

I'm relatively new to JavaScript and especially asynchronous programming. My current project involves creating an Express+React application that shows a GitHub user's information, including a few repositories with the latest 5 commits for each. ...

Is it recommended to utilize the `never` type for a function that invokes `location.replace`?

I'm facing an issue with my TypeScript code snippet: function askLogin(): never { location.replace('/login'); } The TypeScript compiler is flagging an error: A function returning 'never' cannot have a reachable end point. Do ...

execute bower install for the specified bower.json file

Let's say my current working directory is c:\foo\ while the script is running. I want to execute bower from there for the c:\foo\bar\bower.json file. This can be done in npm by using npm install --prefix c:\foo\bar. ...

Uninstalling Puppeteer from npm can be done by running a

Some time ago, I had integrated Puppeteer into an Express API on Heroku using their Git CLI. Recently, I decided to remove Puppeteer from the package.json file and went through the npm install process before trying to push to GitHub. However, it appears th ...

Is there a way to track the loading time of a page using the nextjs router?

As I navigate through a next.js page, I often notice a noticeable delay between triggering a router.push and the subsequent loading of the next page. How can I accurately measure this delay? The process of router push involves actual work before transitio ...

"Comparing the similarity and accessibility of using the same browser session with a Firefox or Chrome

I'm working on a solution to close and open the same session in my browser using a Firefox extension. The code I have currently closes the browser and then opens the last session, but it also opens another window which is not desired. I want to be abl ...

Switching measurement unit to jQuery when retrieving image weight

After coming across a solution on this question, I am looking to determine the weight of an image from a file input. The solution I found displays the result in MiB (Mebibyte) unit. Is there a way to show the image weight using the same code, but in a diff ...

Guide to switch background image using querySelector

I am currently trying to figure out how to set the background image of a div block by using querySelector. I have attempted various methods in my test code below, but unfortunately none seem to be working. Can someone please provide assistance? <!DOC ...

Creating a jQuery alertbox that is triggered by specific elements in an anchor tag

I am working on an HTML page that contains 50 A tags. I am trying to figure out how to create an alert based on a specific element inside the A tag. Here is an example of what I am looking for: <a href "something">click to see the alert</a> ...