React: PropTypes outside of React. Independent type checks module

[aaronabramov]

using react PropTypes is awesome, and can help catching errors at the early stage,
but sometimes, when the application is pretty large, there is always a flow of data
structures of a big size. Like in the web email client application, there can be a Message
type that is passed all over the place, and multiple components can accept it in props.

so the solution to that is usually creating a type file. e.g.

// types/message.js

import React from 'react';

export default React.PropTypes.shape({
    id: React.PropTypes.string.isRequired,
    subject: React.PropTypes.string
}).isRequired;

and then reusing this type in components that get messages in props

import messageType from './types/message';

MessagePreview.PropTypes = {
  message: messageType
}

but sometimes this data flows in some other than components elements. for example flux stores, or action creators. And that usually requires duplication of types (using immutable.js records or similar)

That would we really nice if we could use this type checks in other parts of the application.

for example

// stores/message.js

import messageType from './types/message';
import checkTypes from 'react/check-types';

/**
 * @param {Array<Object>} payload.messages the array of message objects received from the API
 */
onDataReceived = (payload) => {
  payload.messages.forEach((message) => {
    checkTypes(message, messageType);
    addToStore(message);
  });
}

will this be any good? I guess architectually it means making propTypes.js more independent, and creating an adapter for prop/context validating

[jimbolla]

I believe the long term plan is to phase out PropTypes in favor of Flow anyways.

[abritinthebay]

I hope not - because that would remove a huge introspection win in React.

If I want to see what props a React component supports and what types they are... I can with PropTypes. I can't do that with Flow programmatically.

[sophiebits]

@abritinthebay Can you elaborate more on the sorts of things you like to introspect?

[abritinthebay]

Lets use the example of a UI Component Library for devs/product. I know you have one of those at Facebook - I've seen it, it's great.

So - my use case specifically actually - say you're looking at creating one of these awesome interactive and searchable Component Libraries and you want to be able to auto-document (and perhaps auto-test/validate as well) the props of a Component.

While you can inspect the default props that's not that helpful - and doesn't cover optional props either. propTypes actually is an explicit "this prop will be this type" declaration inside the component (ie - it's declarative). It also specifies if it is required or not. Awesome!

This is great because I can then inspect that, check it against the propTypes that are used to validate internally in React, and build a programatic model of a component from this declarative interface. Including if a prop is required or optional!

In my case - automatically documenting a Component is now almost a trivial loop. It's really valuable.

[sophiebits]

FWIW we use https://github.com/reactjs/react-docgen at Facebook.

We're not going to build this as part of React but perhaps something like Flow will have optional runtime typechecks eventually which could incorporate some or all of this functionality.

[abritinthebay]

Hmmm that's an interesting alternative. Thanks :)

[abritinthebay]

One thing to note - it looks like removing propTypes would also break THAT tool... so... might want to think about it.

[zpao]

We work closely the people maintaining that - if / when we get to that point, we'll already have worked with them to get things into shape :)

[abritinthebay]

Good point :) I look forward to seeing the overall solution then (quite important to my team at Bleacher Report moving forward :)

[ArmorDarks]

I know this is old issue, but it's sad to see it closed. I think I'm not the only one who'd like to use PropTypes in non-React projects too.

Did anything change during last year?