This content originally appeared on Bits and Pieces - Medium and was authored by Brian Ridolce
TypeScript is a popular language that allows developers to write type-safe code for JavaScript applications. One of its key features is the ability to work with conditional types, which enable developers to create more flexible and dynamic types. In this article, we’ll explore the basics of conditional types in TypeScript and show you how to use them effectively in your code.
What are Conditional Types in TypeScript?
Conditional types are a way of defining types that depend on other types. They allow developers to create types that change based on certain conditions. For example, you can create a conditional type that only allows values of a certain type if they meet a specific condition. Or, you can create a type that maps a set of types to another set of types based on a condition.
Conditional types are defined using the “extends” keyword, which is used to create a type constraint. The syntax for a conditional type looks like this:
type MyConditionalType<T> = T extends U ? X : Y;
In this syntax, “T” is the type that we want to check, “U” is the type that we want to compare it to, “X” is the type that we want to use if the comparison is true, and “Y” is the type that we want to use if the comparison is false.
Let’s look at some examples of conditional types in action.
Example 1: Conditional Types with the “extends” Keyword
Suppose we have a function that takes an argument of type “T” and returns a value of type “U”. We want to ensure that the argument is of a certain type before calling the function. We can use a conditional type to do this.
type MyFunction<T> = T extends string ? (arg: T) => number : never;
function myFunction<T>(arg: T): ReturnType<MyFunction<T>> {
if (typeof arg === "string") {
return arg.length;
} else {
throw new Error("Invalid argument type");
}
}
In this example, the “MyFunction” type checks whether the input type “T” is a string. If it is, it returns a function that takes a string argument and returns a number. If it isn’t, it returns “never”, which means that the function cannot be called with that type.
We then use the “ReturnType” utility type to ensure that the return type of the function matches the type of the “MyFunction” type. This ensures that the function only returns a value of the correct type.
Example 2: Mapping Types with Conditional Types
Suppose we have a set of types that we want to map to another set of types based on a condition. We can use a conditional type with a mapped type to accomplish this.
type MyMappedType<T> = {
[K in keyof T]: T[K] extends number ? string : T[K];
};
interface MyInterface {
name: string;
age: number;
address: string;
}
const myObject: MyMappedType<MyInterface> = {
name: "John Doe",
age: "30",
address: "123 Main St.",
};In this example, the “MyMappedType” type maps the properties of the input type “T” to a new set of properties. If the original property is of type “number”, the new property is of type “string”. Otherwise, the new property is of the same type as the original property.
We then use the “MyMappedType” type to create a new object that has the same properties as the input type, but with the “age” property converted to a string.
Example 3: Conditional Types with Union Types
Suppose we have a function that takes a union type as an argument and returns a value based on the type of the argument. We can use a conditional type to ensure that the return value is of the correct type.
type MyUnionType<T> = T extends string | number ? string : boolean;
function myUnionFunction<T>(arg: T): MyUnionType<T> {
if (typeof arg === "string" || typeof arg === "number") {
return "string";
} else {
return false;
}
}
In this example, the “MyUnionType” type checks whether the input type “T” is a union of string or number. If it is, it returns a string. If it isn’t, it returns a boolean.
We then use the “MyUnionType” type to ensure that the return value of the function matches the expected type based on the input type.
Conclusion
In this article, we’ve explored the basics of conditional types in TypeScript and shown you how to use them effectively in your code. We’ve looked at examples of using conditional types with the “extends” keyword, mapping types with conditional types, and using conditional types with union types.
Conditional types are a powerful feature of TypeScript that allow you to create more flexible and dynamic types in your code. By using conditional types effectively, you can write more type-safe code and reduce the likelihood of errors in your applications.
Remember that conditional types can quickly become complex and difficult to understand, so use them sparingly and ensure that your code is well-documented and easy to read. With practice and careful consideration, you can become proficient in using conditional types to write more robust and effective TypeScript applications.
Build TypeScript Apps with reusable components, just like Lego
Bit’s open-source tool help 250,000+ devs to build apps with components.
Turn any UI, feature, or page into a reusable component — and share it across your applications. It’s easier to collaborate and build faster.
Split apps into components to make app development easier, and enjoy the best experience for the workflows you want:
→ Micro-Frontends
→ Design System
→ Code-Sharing and reuse
→ Monorepo
Learn more:
- Creating a Developer Website with Bit components
- How We Build Micro Frontends
- How we Build a Component Design System
- How to reuse React components across your projects
- 5 Ways to Build a React Monorepo
- How to Create a Composable React App with Bit
- How to Reuse and Share React Components in 2023: A Step-by-Step Guide
Working with Conditional Types in TypeScript: A Comprehensive Guide was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Bits and Pieces - Medium and was authored by Brian Ridolce
Brian Ridolce | Sciencx (2023-04-20T08:21:37+00:00) Working with Conditional Types in TypeScript: A Comprehensive Guide. Retrieved from https://www.scien.cx/2023/04/20/working-with-conditional-types-in-typescript-a-comprehensive-guide/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.