Error TS2345: The type '{ type: "mouseWheel"; }' cannot be assigned to the parameter of type 'MouseInputEvent | MouseWheelInputEvent | KeyboardInputEvent'

I've integrated the sendInputEvent method into BrowserView:

view.webContents.sendInputEvent({type: 'keyDown', keyCode: 'C'})

In the rendering page of BrowserWindow, I've added:

    window.addEventListener('keydown', function(event) {
        console.log("App_S-keyDown-event: ", event)
    })

This setup functions properly with all keys and arrow keys (up, down).

The problem arises when dealing with MouseWheelInputEvent:

type string - The type of the event, can be mouseWheel
: https://www.electronjs.org/docs/latest/api/structures/mouse-wheel-input-event

When I include:

SearchWindow.webContents.sendInputEvent({type: 'mouseWheel'})

An error message is generated:

 TS2345: Argument of type '{ type: "mouseWheel"; }' is not assignable to parameter of 
type 'MouseInputEvent | MouseWheelInputEvent | KeyboardInputEvent'.
  Property 'keyCode' is missing in type '{ type: "mouseWheel"; }' but required in type
 'KeyboardInputEvent'.

This appears to be a challenge related to using typescript with electron.

Additional information:

electron: 19
typescript: ~4.5.4
O.S.: Ubuntu 22.04 Desktop

How can this issue be resolved?

Answer №1

There are a couple of issues that need to be addressed. Firstly, the correct syntax should use mousewheel instead of mouseWheel. Secondly, and more importantly when working in TypeScript, it is crucial to note that mousewheel is considered obsolete and should be replaced with wheel. For more information on this, refer to MDN (https://developer.mozilla.org/en-US/docs/Web/API/Element/mousewheel_event).

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

Encountered a new problem post code refactoring: "Error with prop validation: prop failed type check"

Currently, I am developing an application using Vue.js 2 with Typescript and utilizing the vue-property-decorator attributes. Recently, I made the decision to refactor a majority of my code which has resulted in encountering errors whenever I pass a binded ...

Validator using asynchronous methods in Angular 2

Currently, I am in the process of incorporating asynchronous custom validation into my project. Below is the structure of my validation class: export class CustomValidators{ _auth_service; constructor(auth_service:AuthService){ this._auth_service = au ...

How to navigate to the bottom of a webpage with Angular 4 using TypeScript's onClick event

Within my component, I have a template that looks like the following. When this div is clicked, the intention is to scroll to the bottom of the page. `<section><div onclick='scrollDown()'>Goto Reports</div></section><d ...

Arranging strings in descending order using Typescript

I was attempting to arrange a string[] in a descending order. This is what I have come up with so far: let values = ["Saab", "Volvo", "BMW"]; // example values.sort(); values.reverse(); Although this method is effective, I am wondering if there is a mo ...

Steps for setting the keys of a map as a priority when initializing a state variable in Typescript for a React component

I am working with a state variable that connects a string username to a UserData object. Initially, the usernames are stored in the string array 'users'. Is there a method to assign the initial state of 'userDataMap' with the keys fro ...

In TypeScript, the function is failing to retrieve the complete array value

I'm facing an issue with a program that is supposed to piece together all the letters, but it's not functioning correctly. I've tried using the debugger, but it doesn't display any errors. Here's the code snippet: var phrase = [ &a ...

Using TypeScript, the fetch function cannot be assigned

Why am I encountering this TS warning? Type 'unknown' is not assignable to type 'PokemonList'.ts(2322) This issue is on line: "return e" Here is the code snippet: export interface PokemonList { count: number; next: stri ...

Comparison of valueChanges between ReactiveForms in the dom and component级主动形

Is there a method to determine if the change in valueChanges for a FormControl was initiated by the dom or the component itself? I have a scenario where I need to execute stuff() when the user modifies the value, but I want to avoid executing it if the v ...

Define class attributes within a TypeScript callback function

I have encountered an issue with my method involving a subscription to an event from a pub sub messaging service. The problem arises when I attempt to define a class property within the callback function, only to find that the property returns as undefin ...

Typescript - Ensuring object assignment with additional property does not result in failure

What is the reason why the code does not fail when executing a = b ? Check out this link type A = { x?: number y?: number } type B = { x?: number z: number } let a: A = {} let b: B = {z: 1} a = b // does not fail a = {z: 1} // fails ...

Error code 2769 in Typescript occurs when attempting to transfer process information to the data state in order to utilize it within a modal

I'm encountering an issue while trying to pass a process to a setData state from a .map function in order to display it on a modal. The error message I'm receiving is: "No overload matches this call. Overload 1 of 2, '(props: { compone ...

Error: Attempting to access an undefined property ('call') on Next.js is causing a TypeError

Exploring the realms of Next.js and Typescript for a new project! My goal is to utilize next.js with typescript and tailwind CSS by simply entering this command: npx create-next-app -e with-tailwindcss my-project Smooth sailing until I hit a snag trying t ...

Different ways to pass a component function's return value to a service in Angular

On my HTML page, I am presenting job details within Bootstrap panels sourced from a JSON array using an ngFor loop. Each panel showcases specific job information along with a unique job ID. The panel is equipped with a click event which triggers the execut ...

Encountering issues with receiving an undefined value while utilizing ngModel and ngValue in Angular 4 alongside JHipster

Objective of the Application: I am currently developing a Web-Application using JHipster and Angular 4. My goal is to create a select option where users can choose from displayed options using ngModel and ngValue. Once a value is chosen, it should be sh ...

Issue encountered while attempting to remove a post from my Next.js application utilizing Prisma and Zod

Currently, I'm immersed in a Next.js project where the main goal is to eliminate a post by its unique id. To carry out this task efficiently, I make use of Prisma as my ORM and Zod for data validation. The crux of the operation involves the client-sid ...

Tips for conducting tests on ngrx/effects using Jasmine and Karma with Angular 5 and ngrx 5

Here is the file that I need to test. My current focus is on some effects service while working with Angular5 (^5.2.0) and ngrx5 (^5.2.0). I have been struggling to properly implement the code below for testing purposes. Any tips or suggestions would be ...

What is the process for transferring a function to reducers in Redux Toolkit?

In one of my files called Main.tsx, I have a function that sends a request and retrieves data: async function fetchProducts(productsPage = 1, id?: number) { const itemsPerPage = 5 let url: string if (id) { url = `https://reqres.in/api/ ...

Tips for effectively simulating the formik useFormikContext function while writing unit tests using jest

I've created a simple component (shown below) that aims to fetch data from the Formik FormContext using the useFormikContext hook. However, I'm facing some challenges when writing unit tests for this component. It requires me to mock the hook, w ...

Difficulty Determining Literal Types that Expand a Union of Basic Data Types

Below are the components and function I am working with: interface ILabel<T> { readonly label: string; readonly key: T } interface IProps<T> { readonly labels: Array<ILabel<T>>; readonly defaultValue: T; readonly onChange ...

Finding items in the database using their identification numbers

I have a scenario where I am accepting a list of IDs in my request, for example [1,2,3]. How can I use typeorm and querybuilder to retrieve only objects with these IDs from my database? I attempted the following: if(dto.customersIds){ Array.prototype. ...