title: TypeScript React - access video element by ref and call .play()
body: <p>I have a TypeScript React video component which I want to play on click. I'm hoping to do this by using a click handler which accesses the video by ref and calls .play(), however I'm getting this error:</p>
  
  <pre><code>TS2339: Property 'play' does not exist on type 'RefObject&lt;HTMLVideoElement&gt;'.
  </code></pre>
  
  <p>Here's my code (with irrelevant parts omitted):</p>
  
  <pre><code>class FullBleedVideo extends React.Component&lt;PropDef, StateDef&gt; {
    private fullBleedVideo: React.RefObject&lt;HTMLVideoElement&gt;;
  
    constructor(props: PropDef) {
      super(props);
  
      this.fullBleedVideo = React.createRef();
      this.state = {
        isPlaying: false,
      };
    }
  
    public handleVideoClick() {
      this.setState({ isPlaying: true });
      this.fullBleedVideo.play();
    }
  
    render() {
      const { isPlaying } = this.state;
  
      return (
        &lt;div className="video_container" onClick={this.handleVideoClick.bind(this)}&gt;
          &lt;video
            ref={this.fullBleedVideo}
          &gt;
            &lt;source src={src} type="video/mp4" /&gt;
          &lt;/video&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>I'm quite new to TypeScript, but not sure where I've gone wrong?</p>