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.
Using useRef
with native elements can be a bit of a pain. You need to specify the type of the element you're targeting, but it's not always clear what type you should be using.
import React , { useRef } from "react";
const Component = () => {
// What goes here?
const audioRef = useRef <NoIdeaWhatGoesHere >(null);
return <audio ref ={audioRef }>Hello</audio >;
};
A simple solution is to hover over the type of ref
to check what it accepts:
import React , { useRef } from "react";
const Component = () => {
// What goes here?
const audioRef = useRef <HTMLAudioElement >(null);
return <audio ref ={audioRef }>Hello</audio >;};
But there's an easier way.
ElementRef
?You can use ElementRef
, a type helper from React, to easily extract the type from the element you're targeting.
import React , { useRef , ElementRef } from "react";
const Component = () => {
const audioRef = useRef <ElementRef <"audio">>(null);
return <audio ref ={audioRef }>Hello</audio >;
};
This even works with custom components that use forwardRef
. You can use typeof
to pass them to ElementRef
, and it'll extract the type of the element that the component is forwarding to.
import { OtherComponent } from "./other-component";
import React , { useRef , ElementRef } from "react";
// Pass it in via typeof!
type OtherComponentRef = ElementRef <typeof OtherComponent >;
const Component = () => {
const ref = useRef <OtherComponentRef >(null);
return <OtherComponent ref ={ref }>Hello</OtherComponent >;
};
If you're using the previous solution (with HTMLAudioElement
or HTMLDivElement
, etc.), there's no reason to change it. But if you're ever unsure what type to use, ElementRef
is a great helper.
And if you want more tips like this, check out my free React and TypeScript beginner's course. There are 21 interactive exercises packed with TypeScript tips and tricks for React apps.
Strongly Type useRef with ElementRef
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.