This Crazy Syntax Lets You Get An Array Element's Type
Learn how to extract the type of an array element in TypeScript using the powerful Array[number]
trick.
When you're working with React and TypeScript, you'll often encounter this kind of error:
const onChange = (e ) => {};Parameter 'e' implicitly has an 'any' type.7006Parameter 'e' implicitly has an 'any' type.
<input onChange ={onChange } />;
It's not always clear what type you should give to the e
inside your onChange
function.
This can happen with onClick
, onSubmit
, or any of the other event handlers that DOM elements receive.
Luckily, there are several solutions:
The first solution is to hover over the type of the thing you're trying to pass in:
<input onChange ={onChange } />;
As you can see, this outputs an astonishingly long type:
React.InputHTMLAttributes<HTMLInputElement>.onChange?:
React.ChangeEventHandler<HTMLInputElement> | undefined
The part we want is this: React.ChangeEventHandler<HTMLInputElement>
.
We can use that to type our onChange
function:
import React from "react";
const onChange : React .ChangeEventHandler <
HTMLInputElement
> = (e ) => {
console .log (e );
};
<input onChange ={onChange } />;
Sometimes, you don't want to type the entire function. You just want to type the event.
To extract the right event type, you need to do a slightly different dance.
First, create an inline function inside onChange
.
<input onChange ={(e ) => {}} />
Now you have access to e
, you can hover over it and get the correct event type:
<input onChange ={(e ) => {}} />
Finally, you can copy that type and use it to type your onChange
function:
import React from "react";
const onChange = (
e : React .ChangeEvent <HTMLInputElement >
) => {
console .log (e );
};
<input onChange ={onChange } />;
This still feels slow, though. Is there a better way?
React.ComponentProps
A way to speed this up would be to remove the step where we check the type of the handler. It would be great to say 'I want this sort of handler type' and have TypeScript figure out the rest.
For this, we can use a type helper called ComponentProps
, which I've written about before.
import React from "react";
const onChange : React .ComponentProps <"input">["onChange"] =
(e ) => {
console .log (e );
};
<input onChange ={onChange } />;
By passing input
to ComponentProps
, we're telling TypeScript that we want the props for the input
element.
Then, we grab the onChange
property from those props, and use it to type our function.
Thanks to Sebastien Lorber for this tip!
EventFrom
HelperThis is really nice, but we're still back to having to type the onChange
function.
What if we want to extract just the event type?
We could use a combination of Parameters
, NonNullable
, and indexed access types to get there:
import React from "react";
const onChange = (
e : Parameters <
NonNullable <React .ComponentProps <"input">["onChange"]>
>[0]
) => {};
But that's far too much code to write.
Instead, let's imagine a type helper called EventFor
:
const onChange = (e : EventFor <"input", "onChange">) => {
console .log (e );
};
<input onChange ={onChange } />;
This takes in the element type and the handler type, and returns the event type. You get autocomplete on each of the parameters, and you don't have to type the function.
The issue is, you need to keep a relatively large type helper in your codebase. Here's the code:
type GetEventHandlers <
T extends keyof JSX .IntrinsicElements
> = Extract <keyof JSX .IntrinsicElements [T ], `on${string}`>;
/**
* Provides the event type for a given element and handler.
*
* @example
*
* type MyEvent = EventFor<"input", "onChange">;
*/
export type EventFor <
TElement extends keyof JSX .IntrinsicElements ,
THandler extends GetEventHandlers <TElement >
> = JSX .IntrinsicElements [TElement ][THandler ] extends
| ((e : infer TEvent ) => any)
| undefined
? TEvent
: never;
Personally, I prefer the EventFor
solution. That might be because I came up with it, but here's why I like it:
But, if you don't want to keep a type helper around, the ComponentProps
solution is a great alternative.
Event Types in React and TypeScript
Learn how to extract the type of an array element in TypeScript using the powerful Array[number]
trick.
Learn how to publish a package to npm with a complete setup including, TypeScript, Prettier, Vitest, GitHub Actions, and versioning with Changesets.
Enums in TypeScript can be confusing, with differences between numeric and string enums causing unexpected behaviors.
Is TypeScript just a linter? No, but yes.
It's a massive ship day. We're launching a free TypeScript book, new course, giveaway, price cut, and sale.
Learn why the order you specify object properties in TypeScript matters and how it can affect type inference in your functions.