Retrieving the event name from a CustomEvent instance

Looking to retrieve the name of a CustomEvent parameter in a function, which is basically the string it was created with (new CustomEvent('foo'))

If you need a reference, check out https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent

    public addEvent(iChannel: number, oEvent: CustomEvent)
    {
        if (App.isDebugging)
        {
            console.log(CustomEvent+' emitted '+CustomEvent.typeArg+' on channel '+iChannel);   
            console.log(CustomEvent);   
        }
        this.aEventChannels[iChannel].dispatchEvent(oEvent);
    }

//here's what lib.dom.d.ts has to say
declare var CustomEvent: {
    prototype: CustomEvent;
    new<T>(typeArg: string, eventInitDict?: CustomEventInit<T>): 
CustomEvent<T>;
};

I've experimented with using type and typeArg, but both give me an error:

tsc --build src-webui/ts
src-webui/ts/App.ts(162,53): error TS2339: Property 'typeArg' does not exist on type '{ new <T>(typeArg: string, eventInitDict?: CustomEventInit<T> | undefined): CustomEvent<T>; prototype: CustomEvent<any>; }'.`

Reacquainting myself with TS can be tricky, so I'm sure the solution is straightforward and I just need it to "click". Any guidance would be greatly appreciated, thank you!

PS: This is targeted for the browser.

Answer №1

Seems like your intention is to access the .type property of the CustomEvent class, not the oEvent object that is passed to the function. Consider implementing the following approach:

public triggerEvent(channelNumber: number, eventInstance: CustomEvent) {
    if (App.isDebugging) {
        console.log('Emitted ' + eventInstance.type + ' on channel ' + channelNumber);   
        console.log(eventInstance);   
    }
    this.eventChannels[channelNumber].dispatchEvent(eventInstance);
}

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

Issue in Jquery: Unable to load the corresponding pages when toggling the checkbox on and off

I am facing an issue with a checkbox and calling different php pages based on the status of the checkbox. Currently, the code works only for checked checkboxes. I'm not sure why it's not working for unchecked checkboxes as well. <script type ...

Enhance your JavaScript code by using the powerful Node.js util.format() method

I have been attempting to enhance the functionality of the node.js util.format function by allowing it to be used as a prototype (for example: "Hello %s".format("World")). Unfortunately, my attempts have all failed. I've tried different formats like: ...

Automatically expanding PrimeNG Turbotable rows

I am using a PrimeNg turbotable that has a row expansion feature enabled. I am looking for a way to automatically expand the rows by default when the table loads. Shown below is my code: HTML <p-table [columns]="cols" [value]="cars" dataKey="vin"> ...

Export data table from HTML to Excel successfully implemented with C#

I am currently working on an Umbraco website and developing a custom plugin for the backend that allows users to export an Excel worksheet from an HTML table. In order to achieve this functionality, I am utilizing AngularJS along with a C# controller. Belo ...

Vue JS Issue: Button click does not trigger tooltip update

I am currently utilizing Vue 3 alongside Bootstrap 5.2. In my project, I have successfully implemented a tooltip by the following method: App.vue <script> import { Tooltip } from "bootstrap"; export default { mounted() { Array.from( ...

Patience is key as you wait for the observable to finish

My methods have dependencies where one method needs to complete before the next can be called. process1(data: string) : Observable<string> { this.dataservice.process(data).subscribe( (response) => { return response. ...

Prohibit using any as an argument in a function if a generic type is

I have attempted to implement this particular solution to prevent the calling of a generic function with the second type being equal to any. The following code snippet works fine as long as the first generic parameter is explicitly specified: declare fu ...

Embrace the flexibility of using Next.js with or without Express.js

Recently, I started the process of migrating a project from create-react-app to next.js. However, I am facing uncertainty when it comes to migrating the backend of the project. Currently, my backend is built with an express server. In next.js, there are p ...

Can SystemJS, JetBrains IntelliJ, and modules be combined effectively?

Looking for some clarification on the functionality of module includes and systemJS within an Angular2 app structure. I have set up a basic Angular2 app with the following layout: -app |-lib (contains shims and node libraries) |-components |-app |-app. ...

Exploring the power of makeStyles in Material UI when combined with TypeScript

I am currently in the process of converting a JavaScript template to Typescript. Here is an example of my accordionStyle.ts file: import { primaryColor, grayColor } from "../../material-dashboard-pro-react"; const accordionStyle = (theme?:an ...

How do I dynamically incorporate Tinymce 4.x into a textarea?

I am encountering a small issue when trying to dynamically add tinymce to a textarea after initialization. tinymce.init({ selector: "textarea", theme: "modern", height: 100, plugins: [ "advlist autolink image lists charmap print p ...

Displaying Highcharts inside an infowindow by sending an AJAX request through Google Maps

After exploring the demo available here, I successfully created a map using data from my MySQL table. Now, my goal is to include a HighChart in the infowindow. However, despite several attempts, I am unable to make it appear. Ultimately, I aim to retrieve ...

Utilizing the HTML5 Download attribute for linking to external files

I am currently developing a web application for my own personal needs. One feature I would like to implement is the ability to set the download attribute on certain links. However, I have run into an issue where the files to be downloaded are hosted on ex ...

What is the process for declaring a set in typescript?

In the documentation on basic types for Typescript, it explains using Arrays as a primitive type I am interested in the syntax: const numbers: string[] = [] How can I achieve the same with a set? ...

Comparison between WAMP and Live server integration with Facebook for connecting applications

I've been facing some challenges while integrating my website with Facebook Connect. I have been following the instructions provided in this guide. When attempting to run the following code from localhost, please note that for security reasons, my ap ...

Troubleshooting the onExited callback issue with Popover component in Material UI

<Popover key={element.name} classes={{ paper: classes.paper }} open={open} anchorEl={this.myRef.current} anchorOrigin={{ vertical: ' ...

Black textures with images sourced from the same domain - Cross-origin

Despite trying numerous solutions and tips to resolve the cross-origin issue, I still can't seem to fix it. There are no errors, the images are hosted on the same domain as the webgl test, but the textures appear black. Occasionally when I refresh rep ...

Displaying a collapsible table directly centered within the table header

I am having trouble centering my table header in the web browser page. When I click the "+" button, the data is displayed beneath the table header, but I want the collapsible table to be centered directly below the header. I have tried making changes in CS ...

Notify other viewers that a button has been activated

I'm working with a basic HTML file that contains two buttons. When one of these buttons is pressed, I want to notify another user in some way within a few seconds. <html> <body> <input type="button" value="Button 1"& ...

How to retrieve the filename from a URL using Node.js

In my Node.js script, I have the following type of link: 148414929_307508464041827_8013797938118488137_n.mp4.m4a?_nc_ht=scontent-mxp1-1.cdninstagram.com&_nc_ohc=_--i1eVUUXoAX9lJQ-u&ccb=7-4&oe=60835C8D&oh=61973532a48cb4fb62ac6711e7eba82f& ...