// @flow

import React from 'react';

class Foo extends React.Component<{}, void> {}
class Bar extends React.Component<{}, void> {}

{
  const stringValue: {current: string | null} = React.useRef("abc"); // Ok
  const numberValue: {current: number | null} = React.useRef(123); // Ok
  const booleanValue: {current: boolean | null} = React.useRef(true); // Ok
  const nullValue: {current: null} = React.useRef(null); // Ok
}

{
  const stringValue: {current: string | null} = React.useRef(123); // Error: number is incompatible with string in property current
  const numberValue: {current: number | null} = React.useRef("abc"); // Error: string is incompatible with number in property current
  const nullValue: {current: null} = React.useRef(true); // Error: boolean is incompatible with null in property current
}

{
  const stringValue: {current: string | null} = React.useRef();
  stringValue.current = "foo"; // Ok
  stringValue.current = 123; // Error: number is incompatible with string in property current
}

{
  const foo: {current: Foo | null} = React.useRef(new Foo()); // Ok
}

{
  const foo: {current: Foo | null} = React.useRef(new Bar()); // Error: Bar is incompatible with Foo in property current
}
