Conditional types in TypeScript allow you to create conditional logic functions within the type system. Let's look at an example. Here we have a generic type is number. It takes the type as a generic input, stores it in type T, and then checks if type T extends the type number, and if that condition is true, returns the literal type number, otherwise returns the literal type other. These types are called conditional types Because of the use of the conditional operator, this is modeled after the conditional operator.

Within JavaScript, people often also call this the ary operator because this is the only operator within JavaScript that has three inputs. A condition a result when the condition is true and a result when the condition is false. Now our is number utility function over here can be invoked with any JavaScript value. For example, it can be invoked with a number or it can be invoked with a string. The same is true of our is number type function. It can be invoked by passing in a generic. For the type T for example, we can pass in number S type T,

or we can pass in something else like a string. The logic for these types is run within the TypeScript type system. When the type number is passed in four T, TypeScript sees that number extends number. It understands that to be true and returns the literal type number, and we can see that when we hover over the result. Similarly, when the type string is passed in four T, TypeScript sees string extends number. It understands that to be false and returns a little type other, and we can see that when we hover over the results.

This comparison between JavaScript and TypeScript gives you a mental model of how to think about conditional types. The key difference is that while the JavaScript is executed by the JavaScript runtime and works with runtime values, the type function is executed by the TypeScript compiler at compile time and works with TypeScript types. Now let's look at a use case of conditional types. Here we have a TypeScript conditional type that works with all of the types that are supported by the JavaScript type of operator. We can use this conditional type as the return type

of a generic function within the function body. We simply return the result of the JavaScript type of operator. Our type name T is modeling at compile time. What the JavaScript type of T will do at runtime. Let's invoke this function with all of the primitives that the JavaScript runtime supports for all of these cases. TypeScript will correctly infer at compile time what the return value will be at runtime. For example, when it is invoked with a value undefined, the JavaScript runtime returns type of undefined,

which will be the literal string undefined, and we've correctly inferred that if you hover over the result. The same is true for other invocations As well. We successfully inferred at compile time the runtime return result of all of these function calls. Let's walk through this Boolean example. When we invoke type name with the literal true TypeScript infers the type of the input argument to be Boolean and therefore T is bullion. Now the return type is annotated to be type name of bullion. TypeScript goes through the conditional type

and the only condition that matches is T extends bullion and therefore TypeScript infers the return type to be the literal bullion. And we can see that inference when we hover over the results. Now, one thing that you might find surprising is that the inferred result of invoking the function with now is the literal type object. And no, this is not a bug. This is just how the JavaScript runtime works with type of now it actually returns the string object. But fortunately with TypeScript,

our type name function can be better than the built-in type of operator in JavaScript. First, we add an additional condition to the type name conditional type to check FT exchange now and return the literal now. And then within our run type, type name function, we add a condition to check. IFT is now to return the literal now, and with these two changes in place, our runtime result will be now and it is also inferred correctly at compile time. Now we can easily keep on adding other conditions to the conditional type

and to our runtime function to make a type nine utility that is specific to our project and meets our needs more than the built in JavaScript runtime support.