Greetings, Devs!
Here's Leonardo once again, embarking on our journey to master TypeScript.
Today, we won't be copying any built-in utilities; instead, we'll create a new and exclusive utility.
We are going to craft a type that transforms tuple types into object types.
First and foremost, let's take a quick overview of what a tuple is.
A tuple is a data structure that allows you to store more than one data type in an array. It looks something like this:
As we've seen, we can map various data types into a single array, which proves to be very helpful in numerous real-world scenarios.
However, another common and useful case is transforming this tuple declaration into another object declaration with the same properties and values. But here's where we run into a problem – the DRY principle, "DON'T REPEAT YOURSELF"; we end up with repeated code.
Fear not, TypeScript is our ally and always comes to our aid.
We can reuse this declaration by converting it into another, thus avoiding redundant type declarations.
Now it's our time to shine as we delve into how to accomplish this with excellence:
Creating Our Utility
Let's name it the TransformToObject type.
Before we get our hands dirty with code, let's explore the theory under the hood.
We need to create the type and receive a generic with the typeof the tuple. Afterward, we can iterate over this tuple. But hold on, it is an array... Bah, we got stuck!! 🤯
No worries, it's simple. We need to iterate over the tuple and, in turn, iterate over the array. How? Let's see:
DISCLAIMER: The most common way to use tuples is by declaring them as readonly, so we'll need to handle this.
Let's create this together, step by step.
First, let's create the type declaration:
Great, now we're able to receive the tuple as a generic prop.
We are going to iterate over each tuple prop and redeclare it as a key/value pair of that object. It's something like this:
But, alas, we encountered an error:
The compiler's type system has already given us a solution. This error occurred because we're trying to iterate over an unknown Type T, which can lead to an error.
To solve this, let's be specific about what the type of the T generic is, like this:
I changed the code, but I still receive an error! What the heck is going on?!!!
Hold on, dude...
TypeScript is correct; this error is caused by typing the generic as an array of strings or numbers, but we're trying to iterate over the methods of that array, not over their values.
Now that we are also going to iterate over the array, it's very simple:
By putting the number inside brackets next to T, we're iterating over that array's properties.
And with that, we're done!! Puff... this task drained all my energy lol hahaha
Let's give it a try:
Pass a tuple to this utility, and we get the following result:
Hover the mouse over the new type, and we get this:
Exactly what we wanted!
With this very simple example, we can expand our TypeScript knowledge.
🤩 That's it for today, folks! 🤩
Follow me for more content about TypeScript, JavaScript, React, and stuff related to these stacks.
Top comments (0)