Is there a method to improve type inference in vscode?

Question

Is there a method to improve type inference in vscode?

Recently, I created a component with a click handler that looks like this:

onClick={(e) => {
    e.stopPropagation();
}}

It seems clear to me, but then the Typescript compiler complains that it's not a valid signature for onClick, which actually accepts either undefined or

React.MouseEventHandler<HTMLDivElement>

. It is pretty obvious what is being passed in. However, when I try to infer the parameter type, it shows:

e: { stopPropogation: () => void; }

This results in an incorrect compilation as well. My frustration arises from the fact that even after examining the definition of onClick, I am still uncertain about the parameter type - I see that it's

React.MouseEventHandler<HTMLDivElement>

, which maps to

EventHandler<MouseEvent<T>>

, with EventHandler being defined as:

type EventHandler<E extends SyntheticEvent<any>> = { bivarianceHack(event: E): void }["bivarianceHack"];

This doesn't provide much information. While it may seem logical that MouseEvent<HTMLDivElement> could work, there's uncertainty due to the mysterious 'bivarianceHack'. Is there any mistake on my end, or is it really this complex to determine the function parameter type and the inference system can't do any better?

typescript

Answer 1

Answer №1

If you're unsure about the type you're dealing with, simply hover over or right click on it to reveal its identity. This way, you can reference the same type name in other instances. For instance, when working with a React click handler, you may observe:

https://i.sstatic.net/3G49l.png

You can easily define a component based on what you see above, such as:

const MyDiv = ({
  onClick
}: {
  onClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
}) => (
  <div onClick={onClick}>foo</div>
);

Answer 2

If you're unsure about the type you're dealing with, simply hover over or right click on it to reveal its identity. This way, you can reference the same type name in other instances. For instance, when working with a React click handler, you may observe:

https://i.sstatic.net/3G49l.png

You can easily define a component based on what you see above, such as:

const MyDiv = ({
  onClick
}: {
  onClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
}) => (
  <div onClick={onClick}>foo</div>
);

Is there a method to improve type inference in vscode?

Answer №1

Similar questions

Adding strings in Typescript

Angular 4 and Webpack: Compilation Error

What could be causing the need for RxJs TypeScript files to be requested exclusively when my website is hosted on IIS?

strictBindCallApply causing issues when working with generic parameters

Exploring Angular 6's nested routes and corresponding components for child navigation

What is the syntax for creating a zip function in TypeScript?

TypeScript Library encounters issues when importing a specific data type

Is it possible to close a tab while the chrome extension popup is still active?

Keep the code running in JavaScript even in the presence of TypeScript errors

Issue encountered while importing supercluster in TypeScript (TypeError: Unable to assign property 'options' to an undefined variable)

Having trouble showing the fa-folders icon in Vuetify?

Combining Layouts and Providers: A Guide to Using Both on a Single Page

The art of linking Observables on the fly in rxjs and angular

Transferring dynamic parameters from a hook to setInterval()

Comparing numbers in Angular using Typescript

Optimal Approaches for Conditional Rendering When Button Click is Involved in Combined Server and Client Components in Next.js 14

Perform TypeScript type checks exclusively on a Next.js project

Unpacking a props object results in an undefined value

Error: Trying to modify an immutable property 'title' of object '#<Object>' - React JS and Typescript

Is there a way to define type information for a global variable when utilizing dynamic import within a function?