Typescript and React: How to have typed refs?

Question

I'm using Typescript with react. If I have a reference, for example

<SomeComponent ref="example-ref"></SomeComponent>

I can access it the usual way with this.refs['example-ref'] and work from there. If I want it typed, I have to explicitly cast it:

var typedRef: SomeComponent = this.refs['example-ref'] as SomeComponent;

But how can I have typed references so that I don't have to cast them? Thanks

You might be able to do it by doing the casting within the ref callback function — Matthew Herbst
– Matthew Herbst, Commented Jan 19, 2016 at 8:35

Bruno Grieder · Accepted Answer · 2016-01-19 09:12:55Z

5

Using an alternative refsyntax works well for us i.e. declare a private var in the class

private comp: SomeComponent;

and then in the TSX

<SomeComponent ref={(c) => { this.comp = c } }/></SomeComponent>

Just access the typed this.comp in the rest of the code

answered Jan 19, 2016 at 9:12

Bruno Grieder

30k10 gold badges73 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1