Strong typing useRef : React + TypeScript

TypeScript and React sometimes need a helping hand so they can play ball well together. Let‘s check how to use `Ref` and forward our `Ref` onto different components to interact imperatively with the DOM. We will do that while creating a nice and accessible Audio Player 🎸

📽 Chapters

0:34 Ref: what is it? What is it used for? 🧐
2:04 Get started with the Player component 🎧
3:54 Typing the Player component 🔒
4:42 Controls component 🕹
6:35 Add types to the Control component 🔒
8:24 Create a Ref with useRef() hook 🪝
9:19 Add audio source 🎶
10:10 Everything working!! 🚀

[alexwallden]

You really explained this in a perfect and concise way, exactly what I was looking for! Thanks!

[Shakeel]

Thanks so much Atila. Very nice explanation of useRef in such a short video.

[blast]

Amazing video. You're strong. What do you think of my typing on TypeRacer?

[edmundchan]

Thanks for the video! For your <Controls /> component, is there any difference if we pass "audioPlayer" as a "ref" instead of a prop i.e., <Controls ref={audioPlayer}></Controls>

[thanhtohieu]

Atila, what the font family you're using in your vscode?