I've never been a fan of TypeScript. But, here I am, writing about it — how Ironic!
I finally decided to give it a shot, since it was the default language that we used at the organization I worked briefly. I was passively learning it, BTW. So, this year, I was like: "why don't you give it a shot, fully!"
I'll be sharing all the findings I make as I progress, in the hopes that it helps you, my reader, and me, whenever I feel lost.
In React, it is ubiquitous for developers to resort to using the
prop-types module in React for prop validation, and this can be done by declaring the shape of the type of prop(s) you want, which one should be required, which shouldn't, which one should be a default prop and many more.
Say we have a component that receives an array of objects — a list of articles — with key-value pairs like
cover_image. Type-checking or prop validation in a React component can be attempted by taking the approach in the snippet below:
And that's it. You may be wondering what exactly is going on with the
map array method. You can read more about how you can destructure object properties in React with array.map()
Achieving this same thing in TypeScript is a little bit similar, just that, this time around, the syntax may look a bit different. The snippet below illustrates how this is done.
The first thing you may have noticed is the
interface keyword. I'll get to explaining what exactly its role is.
Instead of going through the process of using the propTypes declaration, the
interface keyword enables you to define the shape that you want the props of a particular component to take. Alternatively, you can also declare the props you want with the
types keyword too. Take a look at it;
In the component's snippet above, where I've used the
interface keyword, you'll notice the angle brackets
< > beside the
Array data type assigned to the
data prop, and the one besides
React.FC. This symbol/syntax represents the type parameter of a specific component. It allows us to specify the type of props that a component receives.
And in my case here, I've already defined the props that the component will receive, with the
When you look closely at the component's snippet above, you'll also notice a slight change in the way the
index parameter is already type-checked with TypeScript in the
map() block, like so:
At first, I was just passing the
Generally, if we're to go with the best practices, it is not even advisable to use the
index parameter when you carry out a
map() operation, why?, because the content of the supposed array can be modified (deleted, re-ordered), at any time, and using this
index parameter may lead to some performance issues.
I recall Kent C. Dodds talking about how using the
index parameter led to a production error related to representing the appropriate location of an item or so, when he worked at PayPal. It is always advisable to add an
id key in your objects when you have an array that would be iterated over.
Now, I'm beginning to see why people say "TypeScript does this, TypeScript does that". But my ego won't allow me to acknowledge its usefulness. Sorry, TypeScript Fan-babies!
I'll keep sharing my learning process around TypeScript here, so please, anticipate more articles around TypeScript in the coming months.