. Advertisement .
..3..
. Advertisement .
..4..
Follow the instructions and examples below to learn more about adding types to Refs in React using TypeScript. They are a good solution when you can’t accomplish the same task in a declarative manner.
Adding Types To Refs In React Using TypeScript
Creating Refs With createRef()
Those who first use Refs with TypeScript may run into various problems. For instance, this code written for creating Refs isn’t error-free:
import React, { Component, createRef } from 'react'
class ITTutoria extends Component {
private myRef = createRef()
render() {
return <div ref={this.myRef} />
}
}
In fact, you will see this message when compiling it:
[ts]
Type 'RefObject<{}>' is not assignable to type 'RefObject<HTMLDivElement>'.
This error happens because TypeScript automatically sets ref to be a type of HTMLDivElement when you set it on div elements. You can fix the error by setting a generic value for the createRef() function:
class ITTutoriaComponent extends Component {
private myRef = createRef(HTMLDivElement)
render() {
return <div ref={this.myRef} />
}
}
This way, you can attach this ref to a React element with the ref attribute without issue. Remember that you should assign Refs to an instance property when you construct the component so you can refer to it throughout the program.
Accessing Refs With useRef()
After assigning a ref to a React element with the render() function, you can access the node through a reference to the ref’s current attribute:
const node = this.myRef.current;
While this current value helps us access the ref value we have defined, what will be the type of the node variable? null or HTMLDivElement?
The ref value also depends on the node type. If you use the ref attribute on an HTML element, the createRef() constructor will assign the current property of the ref created by it to the DOM element.
If you use the ref attribute on a class component instead, its current property is set to the component’s mounted instance. Since there are no instances with function components, the ref attribute can’t be used on them.
According to the React docs, the current value will be assigned to a DOM element when the component mounts, and it will be assigned back to null when the component unmounts.
For this reason, the following example won’t compile successfully:
class ITTutoria extends Component {
private myRef = React.createRef<HTMLDivElement>()
focus() {
const node = this.myRef.current
node.focus()
}
}
Output:
[ts] Object is possibly 'null'.
const node: HTMLDivElement | null
You can fix this with an if statement:
class ITTutoria extends Component {
private myRef = React.createRef<HTMLDivElement>()
focus() {
const node = this.myRef.current
if (node) {
node.focus()
}
}
}
This will make sure TypeScript narrows the type of the ref value to HTMLDivElement.
There is another way to add a type to useRef(). You can use a pair of brackets before the parenthesis with null:
const ref1 = React.useRef<HTMLLinkElement>(null);
const ref2 = React.useRef<HTMLBRElement>(null);
const ref3 = React.useRef<HTMLButtonElement>(null);
const ref4 = React.useRef<HTMLDivElement>(null);
Every HTML element has its own type definition, which you can use with useRef(). In the above examples, we use HTMLLinkElement, HTMLBRElement, HTMLButtonElement, and HTMLDivElement because we want to get a reference of <a>, <br>, <button>, and <div> elements.
This is a neat solution that sets those ref values to HTMLDivElement | null rather than HTMLDivElement | undefined. Those ref values are initialized with null, but we also tell TypeScript we are actually looking for certain HTML elements at the same time.
Note: console this guide if you encounter the “Object is possibly ‘undefined’” error in TypeScript.
Summary
As long as adding types to Refs in React using TypeScript goes, you can do with both createRef() and useRef() functions. They allow you to set ref values to native HTML elements of your choice.
Leave a comment