Introduction

Are you ready to level up your TypeScript skills? In this article, we're going to reveal a TypeScript trick that's so handy, you'll wonder how you missed it until now. Prepare yourself for a journey into the realm of conditional TypeScript properties, where type safety reigns supreme. Trust us, this trick is simple, powerful, and yes, even a little silly once you realize how straightforward it is. So, grab your coding cape, because we're about to embark on an adventure!

The Gender-Property Dilemma

Imagine a parent component playing matchmaker, passing conditional properties to its child component. But here's the catch, the properties depend on the person's gender. It's like that ancient meme — never ask a man his salary or a woman her weight. Fear not, brave coder, because together we'll conquer this dilemma using TypeScript!

The Challenge

Before we unveil the solution, let's dive into a challenge that'll test your skills. Can you figure out how to conditionally define TypeScript properties based on gender? Take a moment to ponder, let your creativity flow, and give it a try in your own code. Once you're ready, let's continue to the next section for the grand solution.

We have a Props type defined as follows

type Props = {
    name: string
    gender: 'male' | 'female
    salary?: number
    weight?: number
}

Your mission is to implement the child component while ensuring TypeScript's intelligence suggests the salary property only if the gender is "male." We want to keep the weight property hidden from suggestions to maintain an organized coding experience. Think you can crack the code? Let's find out!

---

Implementing the Trick

Okay, time to unravel the mystery of conditional TypeScript properties. Here's how you can tackle it, by changing the type Props to this

type Props = {
  name: string;
} & (MaleProps | FemaleProps);

type MaleProps = {
  gender: "male";
  salary: number;
};

type FemaleProps = {
  gender: "female";
  weight: number;
};

we create a condition that narrows down the type based on gender property. This approach ensures that TypeScript's intelligence suggests the salary property only if the gender is "male." As a result, the weight property remains hidden from TypeScript suggestions, maintaining a cleaner and more focused development experience

Now that you have the solution, it's time for a challenge within a challenge. Think of a real-world use case where conditional TypeScript properties could save the day. How can you leverage this trick to enhance type safety and improve your code structure? We encourage you to brainstorm and come up with creative scenarios where this technique can shine. Here is one real-world example to get you started

Real-World Use Case

Apart from the demonstration with gender-based properties, the trick can be applied in various real-world scenarios. For instance, let's explore a use case involving an API response with conditional properties.

1. Define an APIResponse type that accepts a generic parameter.

2. Create two response types, SuccessResponse and ErrorResponse, each extending APIResponse.

3. Utilize the conditional TypeScript properties to define the required properties for each response type.

4. By leveraging generics, you can specify the expected data type within the response.

5. TypeScript ensures that the correct properties are present in each response type, providing increased type safety.

Conclusion

Congratulations on learning the art of conditional TypeScript properties! With this trick in your toolkit, you can conquer type safety challenges and write cleaner, more robust code. We hope you enjoyed this journey and that it brought a smile to your face. So go forth, apply this trick in your projects, and let your code sparkle with type safety brilliance. Happy coding!