Rule proposal: forbid unspecific prop type definitions

[lo1tuma]

Using React.PropTypes.object or React.PropTypes.array is quite unspecific, it tells you nothing about the actual content of a property.

Example:

class Foo extends React.Component {
    render: function () {
        return <div>{this.props.bar.something}</div>
    }
}

Foo.propTypes = {
    bar: React.PropTypes.object.isRequired
};

const foo = <Foo bar={ otherthing: 'foo' } />;

As you can see the object provided for the bar property doesn’t have a property something which is used in the render function.
To avoid such mistakes it would be better to use React.PropTypes.shape and describe how the object should look like:

Foo.propTypes = {
    bar: React.PropTypes.shape({
        something: React.PropTypes.string.isRequired
    })
};

---

I propose a rule that forbids every usage of:

• React.PropTypes.object which should be replaced by React.PropTypes.shape
• React.PropTypes.array which should be replaced by React.PropTypes.arrayOf

[c089]

😻