markdown guide
 

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.

 

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.

 

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?

 

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

 

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.)

 

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.

  • 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.

 

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.

 

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.

Classic DEV Post from Mar 2

Which game are you playing right now?

What game are you playing right now? Do you have any favourites from your childhood that you reminisce about?

Maximilian Koch profile image

Sore eyes?

dev.to now has dark mode.

Go to the "misc" section of your settings and select night theme ā¤ļø