4 ms·

As a React developer who hasn't used TypeScript yet, I think of PropTypes as a pretty weak alternative to proper static types. 1. You have to manually keep the

by vosper 8y ago

As a React developer who hasn't used TypeScript yet, I think of PropTypes as a pretty weak alternative to proper static types. 1. You have to manually keep the PropTypes in sync with the type of props actually being passed to the function. But nothing makes you do that, and it's pretty easy to neglect them - your editor's not going to complain (at least, WebStorm doesn't) so the first you'll see of a mismatch is if you happen to get an error (not really an error, it doesn't stop your code from running) in the browser or in your tests. 2. They don't actually enforce anything. Sure, React will complain about a prop type mismatch when you call the function, but your code will still run, and then it's up to you to figure out whether the PropType definition is wrong, or whether the prop itself is wrong. Maybe only one usage of the component is passing in the wrong prop type, maybe only under a specific set of conditions, and it's easy enough to miss that in tests (your test data matches the PropType, but your actual API data that ends up being a prop doesn't match the PropType - eg your PropType is a number but the API returns a string and you didn't convert it to a number, now you have a error-warning in production. That's your fault, sure, but you get no help with it from the tooling). 3. They're not very expressive. eg I can't define the shape of an object being passed into my component, I can only tell React that it's some object. 4. PropTypes only work at the boundaries of components. What about my functions inside the components? Or my helper functions that aren't part of a component at all? PropTypes do nothing to help me be sure I'm passing the right data to those.

erokar 8y ago
These are good points. A agree that PropTypes are neither as expressive/spesific nor as strict as using e.g. an interface with TS. I still think they are often good enough. You are also correct to point out PropTypes offer no way of adding typing to component or utility functions. I've seldom seen errors arise from the lack of typing here, and if they do you'll usually discover them at runtime. However types as added documentation of function signatures would be nice.
liamdanielduffy 8y ago
Regarding 3, you actually can use PropTypes to define the shape of an object passed as a prop using PropTypes.shape({...})! You can also specify the types of all of the keys of the object. I find this super useful in many of my projects, I hope it helps with some of yours! https://reactjs.org/docs/typechecking-with-proptypes.html https://reactjs.org/docs/typechecking-with-proptypes.html
tym0 8y ago
You're making some good points and I feel ambivalent about prop types however I wanted give a few solutions to some of the things you said. You can use eslint to enforce the use of prop types, it'll read through your code and will give you a warning if you are using a prop without a corresponding prop types declaration, the rule is called react/prop-types You can us PropTypes.shape and PropTypes.exact to define the shape of props that are objects, see https://www.npmjs.com/package/prop-types https://www.npmjs.com/package/prop-types

by vosper 8y ago

erokar 8y ago

These are good points. A agree that PropTypes are neither as expressive/spesific nor as strict as using e.g. an interface with TS. I still think they are often good enough. You are also correct to point out PropTypes offer no way of adding typing to component or utility functions. I've seldom seen errors arise from the lack of typing here, and if they do you'll usually discover them at runtime. However types as added documentation of function signatures would be nice.

liamdanielduffy 8y ago

Regarding 3, you actually can use PropTypes to define the shape of an object passed as a prop using PropTypes.shape({...})! You can also specify the types of all of the keys of the object. I find this super useful in many of my projects, I hope it helps with some of yours! https://reactjs.org/docs/typechecking-with-proptypes.html https://reactjs.org/docs/typechecking-with-proptypes.html

tym0 8y ago

You're making some good points and I feel ambivalent about prop types however I wanted give a few solutions to some of the things you said. You can use eslint to enforce the use of prop types, it'll read through your code and will give you a warning if you are using a prop without a corresponding prop types declaration, the rule is called react/prop-types You can us PropTypes.shape and PropTypes.exact to define the shape of props that are objects, see https://www.npmjs.com/package/prop-types https://www.npmjs.com/package/prop-types