DEV Community

React PropTypes vs Typescript! Any experience?

Maximilian Koch on May 08, 2018

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
 
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?

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
 
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
 
juanmaguitar profile image
JuanMa • Edited

I'm new to Typescript and after reading this discussion (and some related articles) it makes all the sense in the world to use Typescript over propTypes.

But by checking some of the most populars React Component Libraries projects

like Material-IU:

or Semantic UI React

or React Toolbox

...it seems some big projects are using both.
So, i'm a bit confused about this. And i don't really get the purpose of these *.d.ts files

Why are they using both? What is the purpose of the *.d.ts files?
How does this fit in a react development workflow?

Can anyone shed some light on this? :)

Thanks in advance!!

Collapse
 
joemaffei profile image
Joe Maffei

Why are they using both? What is the purpose of the *.d.ts files?

Because even though the project doesn't use Typescript directly, someone using their library/framework might be developing in Typescript. If the library doesn't have .d.ts files, those developers would have to build type definitions themselves. That's not something you want to do when you just want to import a component into your project (trust me, I've been there.)

Collapse
 
inhumanan profile image
manan vaghasiya

You are right, I have also seen some popular projects using both typescript types and proptypes but couln't understand why.

Here is ant-design using both

Collapse
 
michaeljota profile image
Michael De Abreu

I worked in a project where were used PropTypes and I strongly suggest to migrate to Typescript. I did most of the code migration, and after that I had to left. Sometime after, I ask about the project, and one of my coworkers said to me that they handle to migrate to Typescript, but PropTypes was still a thing for them, I think because they use them in production as well.

  • Typescript: Static type check.
  • PropTypes: Runtime type check.

If you are going to check for type just in development, then Typescript is a better option. Even if you are going to check in production, that you should not for performance reasons, but if you are, still, you would be much better with Typescript, and adding on top PropTypes just for the sake of runtime checking.

Collapse
 
lewiscowles1986 profile image
Lewis Cowles • Edited

This depends on how you are using PropTypes.

The official package states that you will now receive a warning if you try to use the PropTypes.{Type}(...) for runtime validation (annoying as s#!t); but then they go on to say that library checking with PropTypes.checkPropTypes(...) is available.

You can get runtime property-type checking to complement your static type checking. Honestly I think both are kind of a smell in JS.

Collapse
 
dillionmegida profile image
Dillion Megida

This discussion is a bit old, but I have an article where I clearly explain the difference between PropTypes and TypeScript: Comparing TypeScript and PropTypes in React applications

With it, you'll get to understand what makes these tools different and appropriate times to use them.

Collapse
 
sandeepkumardev profile image
Sandeep

Thank you for this amazing blog. It cleared my all doubt.

Collapse
 
joelbonetr profile image
JoelBonetR 🥇

There are two ways you can use TypeScript, did you know?
The second one can be combined with Prop-Types as well to get better insights of your components.

Prop-types let you define which props are required and which ones are optional which is something TS can't give you alone.

Check this post 😄

Collapse
 
vytch profile image
vytch • Edited

I haven't thought about using typescript in react. While prop types and typescript seem to be doing the same thing, typescript also supports interfaces.

By defining interfaces you can ensure that some components will not miss the props that they need.

Collapse
 
dhirajbhujbal profile image
Dhirajbhujbal

What if the API returns the garbage value
I think prop types have the functionality to handle this error how about the typescript how to handle it
I have checked that props types return an error in console.

Collapse
 
elugens profile image
Stacey Wilson

It should be pointed out that there is a babel plugin that converts typescript to proptypes if you are concerned about type checking in a run time environment. I would suggest using typescript which can be challenging at first in React, but you can do it. npmjs.com/package/babel-plugin-typ...

Collapse
 
alexi_be3 profile image
Alexi Taylor 🐶

TypeScript and PropTypes serve two different purposes. TypeScript validate types at compile time while PropTypes validate types at runtime. PropTypes are important when you are testing or debugging components that work with external data, e.g. API calls.

It's possible to generate PropTypesfrom TypeScript interfaces with the babel-plugin-typescript-to-proptypes.

Collapse
 
mauricioprado00 profile image
mauricioprado00

There is one special case that you must use PropTypes regardless if you use typescript types or not.

If you are building components that might be consumed in other projects, then having typescript will not be of any use for people using your components from a javascript project.