Learn how to extend an existing AMD JavaScript class in TypeScript and compile it into an AMD module

I attempted the following steps:

class Child {
    public func() {
       alert("hello");
    }
    constructor() {
        Parent.apply(this, arguments);
    }
}
Child["prototype"] = Object.create(Parent.prototype)
Child["prototype"].constructor = Child;

However, when I create an instance of the Child class, it does not have the func() method.

Can someone provide guidance on how to properly implement inheritance in JavaScript classes?

Answer №1

Example in a General Situation

To declare and use an existing class, simply utilize the declare keyword.

declare class Parent { // This does not generate any JavaScript code
    constructor(value);
}
class Child extends Parent {
    constructor(value) {
        super(value);
    }
}

Scenario Involving an External Module (AMD)

When dealing with an external module, it must be defined in a declaration file with extension .d.ts.

Consider the contents of ContainerSurface.d.ts:

declare class ContainerSurface {
  constructor(options);
}
export = ContainerSurface;

Here's how you would implement it:

import ContainerSurface = require('ContainerSurface');

class Child extends ContainerSurface {
  constructor(options) {
    super(options);
  }
}

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

What is the best way to retrieve Moralis roles using React?

Today is my first time exploring Moralis. I watched some tutorials and went through the documentation. Right now, I am attempting to query the Roles (_Role) but I keep getting an empty array as a result. const { fetch: getStaffRole } = useMoralisQuery(&apo ...

Clickable Angular Material card

I am looking to make a mat-card component clickable by adding a routerlink. Here is my current component structure: <mat-card class="card" > <mat-card-content> <mat-card-title> {{title}}</mat-card-title> &l ...

Each time I load the page, it displays differently depending on the browser. I'm struggling to understand the reason

Trying to figure out how to make the navigation bar close when a link is clicked and directed to a section instead of a new page. When on a large screen, I want the nav bar to remain open but automatically close when on a small screen (for example, when th ...

Having difficulty rendering image in vueJS

I am currently using the SideMenu component to display other SideMenuButton components, but I'm facing an issue where the image is not appearing. Here are the code snippets for both components: SideMenu: <template> <div id = "side-m ...

Utilizing external libraries with RiotJS for greater functionality

My jQuery flexslider is causing slide animation issues because the library is being loaded before the DOM. As a result, I can't trigger actions of the flexslider. Here's the HTML structure: <html> <body> <home-templat ...

Storing information in a session within a callback function using Node.js Express

Within the following code snippet, my goal is to retrieve user information from the database and store it in a session. However, I am encountering an issue where the data is not being properly saved into the session variable as expected. Could this be du ...

Issue with updating element value based on option select

I am struggling to update the text of a div based on the selection of an option in another div. The code snippet I have tried is not working as expected. Is there anyone who can provide assistance with this issue? <div class="field-wrap"> <inpu ...

What could be causing the SyntaxError with JavascriptExecutor: Unexpected identifier?

Python PythonExecutor py = (PythonExecutor) driver; Boolean ready = (Boolean)py.executeScript("the following Python code"); Python Code var ready = False; window.onload = def check_ready(): ready = True def sleep(): return new Promise(resolve = ...

Is there a way to imitate the typeof operation on an object in TypeScript?

Today's challenge is a strange one - I've encountered a bug where the code behaves differently if typeof(transaction) returns object instead of the object name. To work around this issue, I introduced a new parameter called transactionType to my ...

Select one href by clicking and apply addClass

I have a one-page HTML document with links in the header. I want to make it so that when I click on a link (<a>), only that specific link changes its class to (.links). I've tried various methods, but the current jQuery method I'm using ad ...

Manipulating Strings in JavaScript Arrays

I am working with an array of arrays of data that is being retrieved from a csv file. My goal is to filter out specific indexes of an array based on the titles they contain. For instance: If an array index includes the title "Retail", I want to return the ...

Tips on how to reach an Angular component within a third-party library

I'm currently working on a web application that incorporates the Deezer player through the official JS SDK. I've run into an issue where I am unable to access my Angular component from within the Deezer event subscription. The arrow function does ...

Learn how to use sanitizer.bypassSecurityTrustStyle to apply styling to Pseudo Elements before and after in a template

Currently, I am attempting to add style to a pseudo element :after <a class="overflow">{{item?.eco}}</a> My goal is to modify the background color of a:after, and I believe this adjustment needs to be made in HTML. I've been thinking ...

The window.onload function is ineffective when implemented on a mail client

Within my original webpage, there is a script that I have created: <script> var marcoemail="aaaaaa"; function pippo(){ document.getElementById("marcoemailid").innerHTML=marcoemail; } window.onload = pippo; </script> The issue a ...

How to insert a new list item with specific attributes using Jquery

Can anyone help me troubleshoot why I keep getting an error when trying to add a list item with attributes in my code? <div class="subway-map" data-columns="12" data-rows="10" data-cellSize="40" data-legendId="legend" data-textClass="text" data-gridN ...

ajax causing issues with comments display on rails platform

Having trouble rendering comments using ajax in my rails app. The comments are only displayed after redirecting the page, even though they are successfully created. The issue seems to be with rendering comments using ajax and jquery! In my application.htm ...

The function is not defined after the button is clicked when an if-else statement is added to the

Hello there, I am currently working on a form to submit data to the database using ajax and CodeIgniter. The form seems to work fine for inserting data, but it lacks validation to check whether the fields are empty or not. I am attempting to add an if-else ...

Protected Properties within Abstract PHP Arrays Class

As I am relatively new to using Abstract Classes and Object-Oriented Programming, I would appreciate your patience. My issue lies in creating a list of Employees and Customers while facing difficulties in printing out the array of objects within my StoreLi ...

Using Angular and TypeScript/javascript singletons across multiple browser tabs

I am curious about whether the TypeScript singleton class, used as an MVC model object in my Angular application within one browser tab, would be different from or the same as the singleton loaded into another tab within the same browser instance. The set ...

Efficiently update a multi-step form using Ajax and jQuery by adding new content without needing to reload the

Is it possible to create a multistep form on a single page without reloading the div with content from a PHP file, but instead appending it below? Here is my current progress: $(document).on('submit', '#reg-form', function(){ var ln = ...