How To Strongly Type process.env
Learn how to strongly type process.env in TypeScript by either augmenting global type or validating it at runtime with t3-env.
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.
tsx
import {useRef } from "react";constComponent = () => {// What goes here?constaudioRef =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:
tsx
import {useRef } from "react";constComponent = () => {// What goes here?constaudioRef =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.
tsx
import {useRef ,ElementRef } from "react";constComponent = () => {constaudioRef =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.
tsx
// @filename: other-component.tsximport React, { forwardRef } from "react";export const OtherComponent = forwardRef<HTMLTableElement,{ children: React.ReactNode }>(({ children }, ref) => {return <table ref={ref}>{children}</table>;});// @filename: index.tsx// ---cut---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.
Share this article with your friends
Learn how to strongly type process.env in TypeScript by either augmenting global type or validating it at runtime with t3-env.
Discover when it's appropriate to use TypeScript's any
type despite its risks. Learn about legitimate cases where any
is necessary.
Learn why TypeScript's types don't exist at runtime. Discover how TypeScript compiles down to JavaScript and how it differs from other strongly-typed languages.
Improve React TypeScript performance by replacing type & with interface extends. Boost IDE and tsc speed significantly.
In this book teaser, we discuss deriving vs decoupling your types: when building relationships between your types or segregating them makes sense.
Learn how TypeScript's new utility type, NoInfer, can improve inference behavior by controlling where types are inferred in generic functions.