Strongly Typed Refs for React + TypeScript

Using a `string` to store the ref for something you want to use programatically is a bad idea because its stringly typed:

  • Its bad for refactoring
  • Bad for maintainability (find references vs. string search)

So obviously its preferred to store the refs as members on the component. This is how to do it in TypeScript with a sample component:

Basically put them in an object called `ctrls` that is initialized to empty `{}` to begin with and then setup as needed using callbacks to refs in the `render` function 🌹.