LoginSignup
8

More than 5 years have passed since last update.

FlowtypeでReact.propTypesを型チェックする

Posted at

flowtype v0.6を使用

基本的には 最近のFlowtype事情とReact+Flowtype連携 を参考にした

/* @flow */
var React = require('react');
var T = React.PropTypes;

var Component = React.createClass({
  propTypes: {
    message: T.string.isRequired
  },
  render: function(){
    var m: number = this.props.message;
    return <div key='foo'>{m}</div>;
  }
});

結果

$ flow

/Users/mizchi/playground/babel-flow/src/index.js:7:14,21: string
This type is incompatible with
  /Users/mizchi/playground/babel-flow/src/index.js:10:12,17: number

Found 1 error

呼び出し側は型チェックされてない?

React.render(<Component message={1}/>, document.body)

No Errors

ReactComponentだけflowtypeで書くのアリかもなぁという気がした

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8