DEV Community

Discussion on: React PropTypes vs Typescript! Any experience?

Collapse
 
nickytonline profile image
Nick Taylor • Edited

If you use TypeScript, there's absolutely no need for prop types as TypeScript is in charge of type checking. Use prop types only if you're using plain JS.

I would recommend using TypeScript or perhaps Flow (I have no experience with Flow, so can't comment on the experience). If you're looking to move to TypeScript I wrote this post a while back.

Collapse
 
prashantandani profile image
Prashant Andani

To add up... I would say both serve different purposes, Interfaces in Typescript helps validate in compile-timewhereas PropTypes helps to validate in 'Run-Time

Collapse
 
elugens profile image
Stacey Wilson

Perfect answer...

Collapse
 
tschaka1904 profile image
Maximilian Koch

Thanks! I’m having a little struggle to make the difference between the Prop Types and TypeScript at the moment! 😅 But I think I catch up slowly 😅

Collapse
 
nickytonline profile image
Nick Taylor

TypeScript allows you to potentially statically type your whole JS codebase, whereas prop types are really just for validating the soundness of props passed into React components while running in development mode.

When you build for production and are using prop types, ensure to remove them. If you use Create React App, this is already handled for you, but if you have rolled your own config for webpack or another build system, you need to configure your build to remove them for production.

Collapse
 
joelbonetr profile image
JoelBonetR 🥇

You can define required and optional props with Prop-types plus is a good way to get runtime errors (in case some API changes some type and so on), which you can't get with TS alone. (TS type-checking happen in dev time/compile time, not in runtime).

On the other hand, there are two ways in which you can use TS in your project, check this out 😄

Collapse
 
dubyabrian profile image
W. Brian Gourlie

If you use TypeScript, there's absolutely no need for prop types as TypeScript is in charge of type checking.

This isn't entirely true. There are a number of situations where TypeScript's static typing won't save you, the obvious scenario being a package written in TypeScript that is consumed in javascript.

There are other scenarios that I've run into, in particular when using something like Redux to bind your properties. Often times the ambient type declarations aren't perfect and unexpected data can flow through. PropTypes has helped me debug these scenarios.

Collapse
 
nickytonline profile image
Nick Taylor

For your first point, my assumption was that the project was built in TypeScript. If it wasnt though, you are correct, a package built with TypeScript consumed by a plain JavaScript app would not help. On a side note, an editor like VS Code downloads types for packages in the background to provide Intellisense in a JS project.

For your second point, I haven't run into this issue with TS and React. Do you have a sample project demonstrating this?