Snippet of Code:
class CustomEvent extends Event {
constructor(name) {
super(name);
}
}
var customEvent = new CustomEvent("scroll");
Error Encountered During Runtime:
An error occurred: Uncaught TypeError: Failed to construct 'Event': Please make sure to use the 'new' operator, as this DOM object constructor cannot be invoked as a function.
Any possible workarounds for this issue?
An error occurred: Could not create 'Event' object. Please ensure that you are using the 'new' operator, as this DOM constructor does not support being called as a function.
The issue lies with how the Event is defined within the v8 runtime. It does not allow for extension using classes. This was similar to how errors were handled previously, where attempts to extend the Error class would fail:
class MyError extends Error {
constructor(message) {
super(message);
}
}
const error = new MyError("some message");
As it stands, extending the Event class in TypeScript (or ES6 classes) is currently not possible.
If you want to have a centralized events provider, consider creating a static class specifically for that purpose:
static class EventProvider {
static createEvent(name: string): Event {
return new Event(name);
}
static createCustomEvent<T>(name: string, detail: T): CustomEvent<T> {
return new CustomEvent<T>(name, { detail: detail });
}
}
Event is not specified as a Class in Typescript because it is actually a JS object. To achieve the desired functionality, you should create a wrapper class that can call Event's methods in the desired manner. This wrapper class can be extended as needed.
In my code, there is a button component setup like this: export interface ButtonProps { kind?: 'normal' | 'flat' | 'primary'; negative?: boolean; size?: 'small' | 'big'; spinner?: boolean; ...
Objectives I aim to showcase code snippets from the project itself for reference. I intend to keep the displayed code up-to-date with its implementation. I prefer not to remove myself from create-react-app This React project, built using create-react-ap ...
Transitioning from a different framework and switching from JavaScript to Angular & TypeScript has left me feeling confused about how to efficiently share data/values between components. ...
Encountering an issue while attempting to run the Nativescript Android application on my device. The error message states: Could not find method android() for arguments [before_plugins_d5qrcua3za3scd760qug60fz6$_run_closure1@5754ca71] on root project &apos ...
Trying to grasp Angular, I embarked on adding some JavaScript logic to one of my components from a separate JS file. While following advice from a similar query (How to add custom js file to angular component like css file), it seems I missed something cru ...
Currently in my interface, I am attempting to implement a filter for the FOLDER column. This filter is supposed to retrieve data from the database and present it in a dropdown checkbox within that column. The filtering should be based on the selected data. ...
I have a few different scenarios on my mind. Imagine if I make an http call to fetch all movies from my php backend api. This is observable, so I need to subscribe to it. // Here's my service getAll() : Observable<Movie[]>{ this.http.get ...
When working with Next.js App Router in SSR, how can I retrieve the complete URL of the current page? I am unable to use window.location.href due to the absence of a defined window object, and using useRouter() does not provide access to the full URL. ...
If I have these two classes: class MyTypeOne { constructor( public one = '', public two = '') {} } class MyTypeTwo extends MyTypeOne { constructor( one = '', two = '', public three ...
New and Improved Question: As I develop a client-side application, I am structuring an event-handling system inspired by the Redux framework. I have defined different event types as subclasses of a custom Event class. Each subclass includes its own stat ...
I am facing an issue with my Angular frontend where I have numerous html input fields that trigger calculations upon typing. <input type="text" [(ngModel)]="myModel.myAttribute" (input)="calculate()"> The problem arise ...
Component for displaying attendees in an activity interface IProps { attendees: IAttendee[] } export const ActivityListItemAttendees: React.FC<IProps> = ({attendees}) => { return ( <List horizontal> {attendees.ma ...
Consider the following scenario with an interface: interface Example { Component: React.ReactElement; componentProperties: typeof Example.Component; } Is there a way to determine the type of properties expected by a passed-in custom component? For ...
After tirelessly searching for a solution, I found myself unable to reach a concrete conclusion. I was able to import { useRouter } from next/router and successfully parse a local JSON file, but my goal is to parse a JSON object from a URL. One example of ...
I am a bit confused about how this process functions. Currently, I am utilizing schema to create an address auto complete configuration. My goal is to have the option to display or hide the fields for manual input. This is the current appearance of the ...
mergeThreads() { const userId = this.auth.getUser().uid; const buyerThreads$ = this.afs.collection('threads', ref => ref.where('buyerId', '==', userId)).valueChanges(); const sellerThreads$ = this.afs.collection ...
I am attempting to trigger an action once a promise request has been resolved, but I'm having trouble figuring out how to achieve this. After doing some research, I learned that Ionic2 storage.get() returns a promise, and I would like to make an HTTP ...
(This code snippet is purely for demonstration purposes, as no real use-case exists here) I am attempting to create a function that throws an error if the input string is equal to "fish". I have achieved this using the as keyword, but I am curious if ther ...
Currently, I am working on a project with a frontend application running on http://localhost:3000 and a backend API on http://localhost:8000. However, I am facing a CORS issue when trying to make requests from the frontend to the backend API. The error me ...
I am encountering the following errors: "An unexpected fetchPackageMetaData error occurred while making a request to http://registry.npmjs.org/concurrently failed due to a socket hang up." I am currently connected through a corporate proxy with the firew ...