Error Message: ES5 mandates the use of 'new' with Constructor Map

Below is the code snippet:

export class ExtendedMap<T, U> extends Map {
        constructor() {
            super();
        }
    
        toggle(key: T, value: U) {
            if (this.has(key)) {
                super.delete(key);
            } else {
                super.set(key, value);
            }
        }
    
        has(key: T): boolean {
            return super.has(key);
        }
    }
    

An error occurs during ES5 compilation:

ERROR TypeError: Constructor Map requires 'new'

This code is used as follows:

public registryLayers = new ExtendedMap<number, any>();
    

Here is a snippet with TypeScript parts commented out:

/*export*/ class ExtendedMap/*<T, U>*/ extends Map {
                constructor() {
                    super();
                }
            
                toggle(key/*: T*/, value/*: U*/) {
                    if (this.has(key)) {
                        super.delete(key);
                    } else {
                        super.set(key, value);
                    }
                }
            
                has(key/*: T*/)/*: boolean*/ {
                    return super.has(key);
                }
            }
            /*public*/ registryLayers = new ExtendedMap/*<number, any>*/();
            console.log("Worked without error");

Answer №1

If you're targeting ES5 with TypeScript, you may encounter complaints about the use of Map. This can be seen in this example.

When TypeScript generates code for an ES5 environment and you overlook these errors, you might run into issues where TypeScript is trying to use Map as a traditional constructor function instead of a modern class syntax. In your ExtendedMap constructor, it attempts to call Map incorrectly:

return _super.call(this) || this; // Where `_super` refers to `Map`

In contemporary environments, Map is defined as a class constructor and cannot be invoked in that manner, leading to the reported error.

To ensure compatibility with older ES5 environments, it's essential to include a polyfill for Map since it wasn't available in ES5. This allows for correct usage via .call. Even in modern environments supporting Map, the polyfill remains necessary due to the calling mechanism.

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

React's conditional statement is malfunctioning

I am attempting to display a specific form for review if the user meets the following criteria: 1. Logged in 2. Not an administrator 3. Not a moderator My code currently looks like this: <h2>Write a Review</h2> {errorResortReview &a ...

How should .has(), .get() and .set() be properly implemented for a JavaScript Map() within an ExpressJS server?

Feeling thrown off by javascript Map()? My query revolves around javascript Map() - the set, get, and has() functions. Despite thinking I was an expert, it seems I still have things to learn... Situation: I'm dealing with a 'global' map sto ...

Discovering a specific property of an object within an array using Typescript

My task involves retrieving an employer's ID based on their name from a list of employers. The function below is used to fetch the list of employers from another API. getEmployers(): void { this.employersService.getEmployers().subscribe((employer ...

React and Redux Toolkit collaborated to create a seamless shared state management system,

Currently, I am developing a simple application to experiment with Redux Toolkit alongside React. Despite being able to view the object in the Redux Chrome tab, I am facing difficulties accessing it using React hooks within components. The code for my sli ...

Tips for overcoming the Chrome Extension Error related to the "script-source 'self'" issue

I've been developing a Chrome extension that uses goo.gl to shorten URLs. Here is the code I'm currently working with: $("#ajaxfiller").text(""); //Retrieve entered URL var longUrl = $("#input2").val(); longUrl = '"' + longUrl + &a ...

Oops! There seems to be a syntax error near "NOT" in TypeORM

I am currently developing an app using NestJs with a Postgres database and TypeOrm as the ORM. I have created my migration file, configured the package.json file, but when I try to run yarn typeorm migration:run, I encounter the following error: query fail ...

Order of tabs, dialog, and forms customization using Jquery UI

I'm currently working on a jquery dialog that contains a form split into multiple tabs. In order to enhance keyboard navigation, I am looking for a way to make the tab key move from the last element of one tab to the first element of the next tab. Cur ...

Efficiently condense a sequence of ones and zeros into a more compact format, then effortlessly revert it back to the original sequence without any changes. Each time

I've been exploring different approaches in NodeJS and plain JavaScript to improve this task. Currently, I have developed some functions that count the repetition of characters, but I'm curious if there are more efficient methods or potential en ...

Every time I try to call the event in jQuery for the second time, it fails to work

I am currently working on a website that features an image gallery powered by the jquery wookmark plugin with filtering capabilities. Recently, I integrated the colorbox plugin (which was provided as an example by wookmark) to enhance the user experience. ...

Can a React function component be typed with TypeScript without the need for arrow functions?

Here is my current React component typed in a specific way: import React, { FunctionComponent } from "react"; const HelloWorld : FunctionComponent = () => { return ( <div> Hello </div> ); } export default HelloWorld; I ...

JavaScript Plugins for Cordova

The more I delve into the inner workings of Cordova, the clearer it becomes to me. Yet, one area that continues to perplex me is the structure of JavaScript plugins. Typically, I write my JavaScript code as follows, adhering to what I believe is the stand ...

Guide on triggering a modal upon receiving a function response in React

I am looking for a way to trigger a function call within a response so that I can open a modal. Currently, I am utilizing Material UI for the modal functionality. Learn more about Modals here The process involves: Clicking on a button Sending a request ...

Transferring Parameters to EJS Template in Node.js

Hey guys, I'm having an issue with rendering a MongoDB record in my .ejs file. Strangely, when I console.log the variable before the end of my route, I get the expected value. However, it becomes undefined in the .ejs file. Here is the code snippet: ...

Utilizing FullCalendar for showcasing comprehensive details

I'm a big fan of the fullcalendar plugin and all its amazing features. I want to enhance it by displaying more customized information for each event when in agendaWeek or agendaMonth view. Switching between views is easy, but I need help filtering out ...

I'm wondering why Jest is taking 10 seconds to run just two simple TypeScript tests. How can I figure out the cause of this sluggish performance?

I've been experimenting with Jest to execute some TypeScript tests, but I've noticed that it's running quite slow. It takes around 10 seconds to complete the following tests: import "jest" test("good", () => { expec ...

What is the process of encoding a String in AngularJS?

Utilizing Angularjs for sending a GET HTTP request to the server, which is then responded to by the Spring MVC framework. Below is a snippet of code depicting how the URL is built in Angular: var name = "myname"; var query= "wo?d"; var url = "/search/"+qu ...

Oops! There was an issue trying to solve the command "/bin/bash -ol pipefail -c npm run build" while deploying a Next.js app on Railway. Unfortunately, it did not complete successfully and returned an exit code of

[stage-0 8/10] RUN --mount=type=cache,id=s/8a557944-4c41-4e06-8de9-06bfcc5e8aaf-next/cache,target=/app/.next/cache --mount=type=cache,id=s/8a557944-4c41-4e06-8de9-06bfcc5e8aaf-node_modules/cache,target=/app/node_modules/.cache npm run build: 17.62 17.62 ...

Incorporate 3 additional compound filters with shuffle.js

Is there a way to add a third compound filter to the existing shuffle.js code provided below? // ES7 will have Array.prototype.includes. function arrayIncludes(array, value) { return array.indexOf(value) !== -1; } // Convert an array-like object to a r ...

Transferring data from a form to a function in JavaScript

Hey there! I've been working on a form that sends a value to a new window, but for some reason, the value val2 is showing up as null in the new window instead of being passed. Here's my code: function sendValue(value) { ViewImg = window.ope ...

Tips for emphasizing specific sections of text in CodeMirror utilizing substring positions

I am currently utilizing CodeMirror () as a text editor with additional functionalities. One of these features includes highlighting specific words or groups of words based on their positions within the original string. I have an external structure that st ...