For further actions, you may consider blocking this person and/or reporting abuse
Read next
The story behind John Doe
Muhammad Essa -
Understanding dangerouslySetInnerHTML in React: A Complete Guide
Sarthak Niranjan -
🚀 Inside the Frontend Magic of YouTube: A Deep Dive into the Architecture Powering One of the World’s Largest Platforms
Harshit Singh -
The 5 Best Design Tools in 2024⚡️
Priyank Deep Singh -
Top comments (21)
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.
Consider Using TypeScript
Nick Taylor ・ Oct 8 '17 ・ 5 min read
To add up... I would say both serve different purposes, Interfaces in Typescript helps validate in compile-time
whereas PropTypes helps to validate in 'Run-TimePerfect answer...
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.
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?
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 😄
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 😅
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.
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!!
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.)
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
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.
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.
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 withPropTypes.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.
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.
Thank you for this amazing blog. It cleared my all doubt.
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 😄
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.
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.
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...
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.