prettier/tests/flow/new_react/__snapshots__/jsfmt.spec.js.snap

exports[`test FeedUFI.react.js 1`] = `
"/**
 * Copyright 2004-present Facebook. All Rights Reserved.
 *
 * @providesModule FeedUFI.react
 * @flow
 */

\'use strict\';

var UFILikeCount = require(\'UFILikeCount.react\');
var React = require(\'react\');

var FeedUFI = React.createClass({
  _renderLikeCount: function(
      feedback: any
  ) {
    var props = {
      className: \"\",
      key: \"\",
      feedback: {feedback},
      permalink: \"\",
    };
    var ignored = <UFILikeCount {...props} />;
    return (
      <UFILikeCount
        className=\"\"
        key=\"\"
        feedback={feedback}
        permalink=\"\"
      />
    );
  },

  render: function(): ?React.Element<any> {
    return (
      <div/>
    );
  }

});

module.exports = FeedUFI;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/**
 * Copyright 2004-present Facebook. All Rights Reserved.
 *
 * @providesModule FeedUFI.react
 * @flow
 */

\"use strict\";

var UFILikeCount = require(\"UFILikeCount.react\");
var React = require(\"react\");

var FeedUFI = React.createClass({
  _renderLikeCount: function(feedback: any) {
    var props = {
      className: \"\",
      key: \"\",
      feedback: { feedback },
      permalink: \"\"
    };
    var ignored = <UFILikeCount {...props} />;
    return (
      <UFILikeCount className=\"\" key=\"\" feedback={feedback} permalink=\"\" />
    );
  },
  render: function(): ?React.Element<any> {
    return <div />;
  }
});

module.exports = FeedUFI;
"
`;

exports[`test Mixin.js 1`] = `
"/* @providesModule Mixin */
module.exports = {
    success: function() { }
};
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/* @providesModule Mixin */
module.exports = { success: function() {} };
"
`;

exports[`test UFILikeCount.react.js 1`] = `
"/**
 * Copyright 2004-present Facebook. All Rights Reserved.
 *
 * @providesModule UFILikeCount.react
 * @flow
 */

\'use strict\';

var React = require(\'react\');

var UFILikeCount = React.createClass({
  propTypes: {
    permalink: React.PropTypes.string,
    feedback: React.PropTypes.object.isRequired
  },

  render: function(): ?React.Element<any> {
    return <div/>;
  }
});

module.exports = UFILikeCount;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/**
 * Copyright 2004-present Facebook. All Rights Reserved.
 *
 * @providesModule UFILikeCount.react
 * @flow
 */

\"use strict\";

var React = require(\"react\");

var UFILikeCount = React.createClass({
  propTypes: {
    permalink: React.PropTypes.string,
    feedback: React.PropTypes.object.isRequired
  },
  render: function(): ?React.Element<any> {
    return <div />;
  }
});

module.exports = UFILikeCount;
"
`;

exports[`test bad_default_props.js 1`] = `
"var React = require(\'React\');

type T1 = { }
type T2 = { x: number }
type T3 = { x: number, y: number }

class C1 extends React.Component<T1, T2, any> { // error
}

class C2 extends React.Component<void, T2, any> { // OK
}

// no need to add type arguments to React.Component
class C3 extends React.Component { // OK
  static defaultProps: T1;
  props: T2;
}

class C4 extends React.Component { // OK, recommended
  // no need to declare defaultProps unless necessary
  props: T2;
}

class C5 extends React.Component<T2, T3, any> { // error
}

class C6 extends React.Component { // OK, recommended
  static defaultProps: T2;
  props: T3;
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
var React = require(\"React\");

type T1 = {};
type T2 = { x: number };
type T3 = { x: number, y: number };

class C1
  extends React.Component<T1, T2, any> {} // error

class C2
  extends React.Component<void, T2, any> {} // OK

// no need to add type arguments to React.Component
class C3
  extends React.Component { // OK
  static defaultProps: T1;
  props: T2;
}

class C4
  extends React.Component { // OK, recommended
  // no need to declare defaultProps unless necessary
  props: T2;
}

class C5
  extends React.Component<T2, T3, any> {} // error

class C6
  extends React.Component { // OK, recommended
  static defaultProps: T2;
  props: T3;
}
"
`;

exports[`test classes.js 1`] = `
"var React = require(\'React\');

type DefaultProps = { };
type Props = { x: number };
type State = { y: number };

class Foo extends React.Component {
  props: Props;
  state: State;
  static defaultProps: DefaultProps;

  is_mounted: boolean;

  static bar(): void {}

  qux(): void {
    var _: string = this.props.x;
  }

  constructor(props) {
    super(props);
    this.state = { y: \"\" };
  }

  setState(o: { y_: string }): void { }

  componentDidMount(): void {
    this.is_mounted = true;
  }

  componentWillReceiveProps(
    nextProps: Object,
    nextContext: any
  ): void {
    this.qux();
  }

}

Foo.defaultProps = 0;
var foo: $jsx<number> = <Foo/>;

Foo.bar();

var FooLegacy = React.createClass({
  is_mounted: (undefined: ?boolean),

  propTypes: {
    x: React.PropTypes.number.isRequired
  },

  getDefaultProps(): DefaultProps { return {} },

  statics: {
    bar(): void {}
  },

  qux(): void {
    var _: string = this.props.x;
  },

  getInitialState(): { y: string } {
    return { y: \"\" };
  },

  setState(o: { y_: string }): void { },

  componentDidMount(): void {
    this.is_mounted = true;
  },

  componentWillReceiveProps(
    nextProps: Object,
    nextContext: any
  ): void {
    this.qux();
  },
});

FooLegacy.defaultProps = 0; // TODO: should be error
var foo_legacy: $jsx<number> = <FooLegacy/>;

FooLegacy.bar();
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
var React = require(\"React\");

type DefaultProps = {};
type Props = { x: number };
type State = { y: number };

class Foo extends React.Component {
  props: Props;
  state: State;
  static defaultProps: DefaultProps;

  is_mounted: boolean;

  static bar(): void {}

  qux(): void {
    var _: string = this.props.x;
  }

  constructor(props) {
    super(props);
    this.state = { y: \"\" };
  }

  setState(o: { y_: string }): void {}

  componentDidMount(): void {
    this.is_mounted = true;
  }

  componentWillReceiveProps(nextProps: Object, nextContext: any): void {
    this.qux();
  }
}

Foo.defaultProps = 0;
var foo: $jsx<number> = <Foo />;

Foo.bar();

var FooLegacy = React.createClass({
  is_mounted: (undefined: ?boolean),
  propTypes: { x: React.PropTypes.number.isRequired },
  getDefaultProps(): DefaultProps {
    return {};
  },
  statics: { bar(): void {} },
  qux(): void {
    var _: string = this.props.x;
  },
  getInitialState(): { y: string } {
    return { y: \"\" };
  },
  setState(o: { y_: string }): void {},
  componentDidMount(): void {
    this.is_mounted = true;
  },
  componentWillReceiveProps(nextProps: Object, nextContext: any): void {
    this.qux();
  }
});

FooLegacy.defaultProps = 0; // TODO: should be error
var foo_legacy: $jsx<number> = <FooLegacy />;

FooLegacy.bar();
"
`;

exports[`test import-react.js 1`] = `
"/* @flow */

// Testing local binding of React in all kinds of ways. The only reason this
// might even be an issue is that internally, the use of JSX triggers an
// implicit require(\'react\'), so any bugs in (1) interop of CJS require and ES6
// import (2) module re-export, as used to redirect the module name \'React\' to
// \'react\' might show up here.

import React from \"react\";
//import React from \"React\";
//var React = require(\"react\");
//var React = require(\"React\");

class HelloMessage extends React.Component {
  props: { name: string };
}

<HelloMessage name={007} />; // number ~/~> string error
<HelloMessage name=\"Bond\" />; // ok
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/* @flow */

// Testing local binding of React in all kinds of ways. The only reason this
// might even be an issue is that internally, the use of JSX triggers an
// implicit require(\'react\'), so any bugs in (1) interop of CJS require and ES6
// import (2) module re-export, as used to redirect the module name \'React\' to
// \'react\' might show up here.

import React from \"react\";
//import React from \"React\";
//var React = require(\"react\");
//var React = require(\"React\");

class HelloMessage extends React.Component {
  props: { name: string };
}

<HelloMessage name={007} />; /* number ~/~> string error*/
<HelloMessage name=\"Bond\" />; // ok
"
`;

exports[`test new_react.js 1`] = `
"var React = require(\'react\');
var Mixin = require(\'Mixin\');
var C = React.createClass({
    mixins: [Mixin],
    propTypes: {
        x: React.PropTypes.string.isRequired,
        y: React.PropTypes.array,
        z: React.PropTypes.number
    },
    replaceProps(props: { }) { },

    getDefaultProps(): { z: number } {
        return { z: 0 };
    },
    getInitialState() { return 4; },
    render() {
        var foo: string = this.state;
        var bar: string = this.props;
        var qux: string = this.props.z;
        var w:number = this.props.x;
        this.props.y[0];
        var len:number = this.props.x.length;
        this.success();
        return <div/>;
    }

})

var element = <C x = {0}/>;
var element_ = <C/>;

var x: number = C.displayName;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
var React = require(\"react\");
var Mixin = require(\"Mixin\");
var C = React.createClass({
  mixins: [Mixin],
  propTypes: {
    x: React.PropTypes.string.isRequired,
    y: React.PropTypes.array,
    z: React.PropTypes.number
  },
  replaceProps(props: {}) {},
  getDefaultProps(): { z: number } {
    return { z: 0 };
  },
  getInitialState() {
    return 4;
  },
  render() {
    var foo: string = this.state;
    var bar: string = this.props;
    var qux: string = this.props.z;
    var w: number = this.props.x;
    this.props.y[0];
    var len: number = this.props.x.length;
    this.success();
    return <div />;
  }
});

var element = <C x={0} />;
var element_ = <C />;

var x: number = C.displayName;
"
`;

exports[`test propTypes.js 1`] = `
"var React = require(\'react\');
var PropTypes = React.PropTypes;

var C = React.createClass({
  propTypes: {
    statistics: PropTypes.arrayOf(PropTypes.shape({
      label: PropTypes.string.isRequired,
      value: PropTypes.number,
    })).isRequired,
  }
});

<C statistics={[
  {},
  {label:\"\",value:undefined},
]}/>; // error (label is required, value not required)

var props: Array<{label: string, value?: number}> = [
  {},
  {label:\"\",value:undefined},
]; // error (same as ^)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
var React = require(\"react\");
var PropTypes = React.PropTypes;

var C = React.createClass({
  propTypes: {
    statistics: PropTypes.arrayOf(
      PropTypes.shape({
        label: PropTypes.string.isRequired,
        value: PropTypes.number
      })
    ).isRequired
  }
});

<C statistics={[{}, { label: \"\", value: undefined }]} />; // error (label is required, value not required)
var props: Array<{ label: string, value?: number }> = [
  {},
  { label: \"\", value: undefined }
]; // error (same as ^)
"
`;

exports[`test props.js 1`] = `
"var React = require(\'react\');
var TestProps = React.createClass({

    propTypes: {
        x: React.PropTypes.string,
        z: React.PropTypes.number
    },

    getDefaultProps: function() {
        return {x: \'\', y: 0}
    },

    test: function() {
        var a: number = this.props.x; // error
        var b: string = this.props.y; // error
        var c: string = this.props.z; // error
    }
});

var element = <TestProps x={false} y={false} z={false} />; // 3 errors

(element: $jsx<*>);
(element: $jsx<TestProps>);
var FooProps = React.createClass({
    propTypes: { w: React.PropTypes.string.isRequired }
});
(element: $jsx<FooProps>);
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
var React = require(\"react\");
var TestProps = React.createClass({
  propTypes: { x: React.PropTypes.string, z: React.PropTypes.number },
  getDefaultProps: function() {
    return { x: \"\", y: 0 };
  },
  test: function() {
    var a: number = this.props.x; // error
    var b: string = this.props.y; // error
    var c: string = this.props.z; // error
  }
});

var element = <TestProps x={false} y={false} z={false} />; // 3 errors
(element: $jsx<*>);
(element: $jsx<TestProps>);
var FooProps = React.createClass({
  propTypes: { w: React.PropTypes.string.isRequired }
});
(element: $jsx<FooProps>);
"
`;

exports[`test props2.js 1`] = `
"var React = require(\'react\');
var C = React.createClass({
    propTypes: {
        foo: React.PropTypes.string.isRequired,
        bar: React.PropTypes.string.isRequired,
    }
});
var D = React.createClass({
    getInitialState: function(): { bar: number } {
        return { bar: 0 };
    },
    render: function() {
        var obj = { bar: 0 };
        var s: string = this.state.bar;
        return <C {...this.state} foo = {0} />;
    }
});
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
var React = require(\"react\");
var C = React.createClass({
  propTypes: {
    foo: React.PropTypes.string.isRequired,
    bar: React.PropTypes.string.isRequired
  }
});
var D = React.createClass({
  getInitialState: function(): { bar: number } {
    return { bar: 0 };
  },
  render: function() {
    var obj = { bar: 0 };
    var s: string = this.state.bar;
    return <C {...this.state} foo={0} />;
  }
});
"
`;

exports[`test props3.js 1`] = `
"var React = require(\'react\');
var TestProps = React.createClass({
    // Do something illegal inside of propTypes and make sure Flow notices
    propTypes: {
      arr: React.PropTypes.array,
      arr_rec: React.PropTypes.array.isRequired,
      bool: React.PropTypes.bool,
      bool_rec: React.PropTypes.bool.isRequired,
      func: React.PropTypes.func,
      func_rec: React.PropTypes.func.isRequired,
      number: React.PropTypes.number,
      number_rec: React.PropTypes.number.isRequired,
      object: React.PropTypes.object,
      object_rec: React.PropTypes.object.isRequired,
      string: React.PropTypes.string,
      string_rec: React.PropTypes.string.isRequired,

      any: React.PropTypes.any,
      any_rec: React.PropTypes.any.isRequired,
      element: React.PropTypes.element,
      element_rec: React.PropTypes.element.isRequired,
      node: React.PropTypes.node,
      node_rec: React.PropTypes.node.isRequired,

      arrayOf: React.PropTypes.arrayOf(React.PropTypes.string),
      arrayOf_rec: React.PropTypes.arrayOf(React.PropTypes.string).isRequired,
      instanceOf: React.PropTypes.instanceOf(Object),
      instanceOf_rec: React.PropTypes.instanceOf(Object).isRequired,
      objectOf: React.PropTypes.objectOf(React.PropTypes.string),
      objectOf_rec: React.PropTypes.objectOf(React.PropTypes.string).isRequired,
      oneOf: React.PropTypes.oneOf([\"yes\", \"no\"]),
      oneOf_rec: React.PropTypes.oneOf([\"yes\", \"no\"]).isRequired,
      oneOfType: React.PropTypes.oneOfType(
        [React.PropTypes.string, React.PropTypes.number]
      ),
      oneOfType_rec: React.PropTypes.oneOfType(
        [React.PropTypes.string, React.PropTypes.number]
      ).isRequired,
      shape: React.PropTypes.shape({
        foo: React.PropTypes.string,
        bar: React.PropTypes.number,
      }),
      shape_rec: React.PropTypes.shape({
        foo: React.PropTypes.string,
        bar: React.PropTypes.number,
      }).isRequired,

      // And do something bad here
      bad_one: React.PropTypes.imaginaryType,
      bad_two: React.PropTypes.string.inRequired,
    },
});
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
var React = require(\"react\");
var TestProps = React.createClass({
  // Do something illegal inside of propTypes and make sure Flow notices
  propTypes: {
    arr: React.PropTypes.array,
    arr_rec: React.PropTypes.array.isRequired,
    bool: React.PropTypes.bool,
    bool_rec: React.PropTypes.bool.isRequired,
    func: React.PropTypes.func,
    func_rec: React.PropTypes.func.isRequired,
    number: React.PropTypes.number,
    number_rec: React.PropTypes.number.isRequired,
    object: React.PropTypes.object,
    object_rec: React.PropTypes.object.isRequired,
    string: React.PropTypes.string,
    string_rec: React.PropTypes.string.isRequired,
    any: React.PropTypes.any,
    any_rec: React.PropTypes.any.isRequired,
    element: React.PropTypes.element,
    element_rec: React.PropTypes.element.isRequired,
    node: React.PropTypes.node,
    node_rec: React.PropTypes.node.isRequired,
    arrayOf: React.PropTypes.arrayOf(React.PropTypes.string),
    arrayOf_rec: React.PropTypes.arrayOf(React.PropTypes.string).isRequired,
    instanceOf: React.PropTypes.instanceOf(Object),
    instanceOf_rec: React.PropTypes.instanceOf(Object).isRequired,
    objectOf: React.PropTypes.objectOf(React.PropTypes.string),
    objectOf_rec: React.PropTypes.objectOf(React.PropTypes.string).isRequired,
    oneOf: React.PropTypes.oneOf([\"yes\", \"no\"]),
    oneOf_rec: React.PropTypes.oneOf([\"yes\", \"no\"]).isRequired,
    oneOfType: React.PropTypes.oneOfType([
      React.PropTypes.string,
      React.PropTypes.number
    ]),
    oneOfType_rec: React.PropTypes.oneOfType([
      React.PropTypes.string,
      React.PropTypes.number
    ]).isRequired,
    shape: React.PropTypes.shape({
      foo: React.PropTypes.string,
      bar: React.PropTypes.number
    }),
    shape_rec: React.PropTypes.shape({
      foo: React.PropTypes.string,
      bar: React.PropTypes.number
    }).isRequired,
    // And do something bad here
    bad_one: React.PropTypes.imaginaryType,
    bad_two: React.PropTypes.string.inRequired
  }
});
"
`;

exports[`test props4.js 1`] = `
"// @flow

import React from \"React\";

class JDiv extends React.Component {
  // static defaultProps: { };
  props: {
    id: string
  };
}

// Should be a type error (\'id\' takes a string, not a number..)
<JDiv id={42} />;

class Example extends React.Component {
  props: { bar: string };

  render() {
    return <div>{this.props.bar}</div>
  }
}

React.render(
  <Example foo=\"foo\" />,
  document.body
);
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// @flow

import React from \"React\";

class JDiv extends React.Component {
  // static defaultProps: { };
  props: { id: string };
}

/* Should be a type error (\'id\' takes a string, not a number..)*/
<JDiv id={42} />;

class Example extends React.Component {
  props: { bar: string };

  render() {
    return <div>{this.props.bar}</div>;
  }
}

React.render(<Example foo=\"foo\" />, document.body);
"
`;

exports[`test props5.js 1`] = `
"var React = require(\'React\');

var C = React.createClass({
  getDefaultProps: function() {
    return { x: 0 };
  }
});

module.exports = C;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
var React = require(\"React\");

var C = React.createClass({
  getDefaultProps: function() {
    return { x: 0 };
  }
});

module.exports = C;
"
`;

exports[`test state.js 1`] = `
"/* @flow */

var React = require(\'react\');

type State = {
    bar: ?{ qux: string; };
};

var ReactClass = React.createClass({
    getInitialState: function():State {
        return { bar: null };
    },

    render: function(): any {
        // Any state access here seems to make state any
        this.state;
        return (
        <div>
                {this.state.bar.qux}
        </div>
        );
    }
});
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/* @flow */

var React = require(\"react\");

type State = { bar: ?{ qux: string } };

var ReactClass = React.createClass({
  getInitialState: function(): State {
    return { bar: null };
  },
  render: function(): any {
    // Any state access here seems to make state any
    this.state;
    return (
      <div>
        {this.state.bar.qux}
      </div>
    );
  }
});
"
`;

exports[`test state2.js 1`] = `
"// @flow

var React = require(\'react\');

type FooState = {
    key: ?Object;
};

var Comp = React.createClass({
    getInitialState: function(): FooState {
        return {
            key: null, // this used to cause a missing annotation error
        };
    }
});

module.exports = Comp;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// @flow

var React = require(\"react\");

type FooState = { key: ?Object };

var Comp = React.createClass({
  getInitialState: function(): FooState {
    return {
      key: null // this used to cause a missing annotation error
    };
  }
});

module.exports = Comp;
"
`;

exports[`test state3.js 1`] = `
"var React = require(\'react\');
var TestState = React.createClass({

    getInitialState: function(): { x: string; } {
        return {
            x: \'\'
        }
    },

    test: function() {
        var a: number = this.state.x; // error

        this.setState({
            x: false // error
        })
    }

});
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
var React = require(\"react\");
var TestState = React.createClass({
  getInitialState: function(): { x: string } {
    return { x: \"\" };
  },
  test: function() {
    var a: number = this.state.x; // error
    this.setState({
      x: false // error
    });
  }
});
"
`;

exports[`test state4.js 1`] = `
"var React = require(\'React\');

var C = React.createClass({
  getInitialState: function() {
    return { x: 0 };
  },

  render() {
    this.setState({ y: 0 });
    return <div>{this.state.z}</div>
  }

});
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
var React = require(\"React\");

var C = React.createClass({
  getInitialState: function() {
    return { x: 0 };
  },
  render() {
    this.setState({ y: 0 });
    return <div>{this.state.z}</div>;
  }
});
"
`;

exports[`test state5.js 1`] = `
"var React = require(\'React\');

class C extends React.Component {
  foo(): number {
    return this.state.x; // error: need to declare type of state
  }
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
var React = require(\"React\");

class C extends React.Component {
  foo(): number {
    return this.state.x; // error: need to declare type of state
  }
}
"
`;