DEV Community

Discussion on: To TS or not to TS, that is NOT the question. Is it?

Collapse
 
paratron profile image
Christian Engel

I am working in a similar environment (nextJS frontend for a huge news portal in germany).

We are not using prop types at all in favor of: typescript interfaces! :D

Ususally, a component looks like this:

interface Props {
    id: string;
    title?: string;
    count: number;
    currentUser: UserObject; 
}

function MyComponent({id, title = "Default", count, currentUser}: Props){
    ...
}
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
joelbonetr profile image
JoelBonetR 🥇

You can combine the JSDoc approach with PropTypes.
Remember that TS interfaces and Prop Types are not covering the same need.

Prop Types offer runtime checking while TS does not plus it lets you define optional and required props and enforces you to add a default for those which are optional 😀

Thread Thread
 
paratron profile image
Christian Engel • Edited

Runtime checking is absolutely unnecessary - except at the point where foreign data enters your system. So static type checks are better since they do not unnecessarily clog your runtime execution.

About optional and defaults: thats perfectly possible and I used it in my example. title is optional and has a default.

Thread Thread
 
paratron profile image
Christian Engel

Oh and by the way: as far as I know, the runtime checks of prop-types only work in development mode and is removed from production builds - so you get the sameas with TS.

Thread Thread
 
joelbonetr profile image
JoelBonetR 🥇 • Edited

In my current specific use case there is a headless CMS that manages both the structure and the data to show on it.

It's better to not remove them and fallback to a controlled error if it suits instead.
Removing them is something that you need to actively config, not something that works like that out of the box.

On the default thingy, we can receive relatively big chunks of data thus It's less invasive or more maintainable to get defaults defined in prop-types instead on the component definition.

It's all about the use-case like always :)

On the other hand, by all means this post is about having different options, not an allusion to fight between two tech stacks. You can use whatever you want, but you should use whatever your project needs.

A possible TL;DR would be "Is better to use TS, but just use the amount of TS you really need" 🤷🏻‍♀️😂