In TypeScript we need to define types for every variable and object as it is a strict language type and also contains conditional types.
From the word condition type, we can predict that we need to select a variable based on a specific condition. Yes, you heard it right. Just like we use if-else statements to execute a specific block of code based on specific conditions, we can also select the type of a variable based on specific conditions.
In this tutorial, we will learn to create conditional types in TypeScript.
Users can create conditional types in TypeScript according to the following syntax.
1 |
|
We use the ternary operator in the above syntax to create conditional types.
First_type - It is a type or variable.
Second_type - It is a type like number, string, boolean etc.
True_type - If first_type contains second_type, true_type will be assigned to the variable.
False_type - If first_type does not extend second_type, false_type will be assigned to the variable.
Now we will look at different examples to learn more about conditional types in TypeScript.
In the following example, we define two interfaces. In TypeScript, an interface also works the same as a type alias in that it defines the structure of an object or class.
After that, we extended interface2 with interface1. This means that interface2 contains all properties of interface1. After that, we assign the condition type to the type1 and type2 aliases using the ternary operator.
In the output, the user can check the types of var1 and var2 variables.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
|
When compiled, it will generate the following JavaScript code -
var var1 = 20; var var2 = "Hello"; console.log("The type of var1 variable is " + typeof var1); console.log("The type of var2 variable is " + typeof var2);
The above code will produce the following output -
1 2 |
|
We have learned the basics of conditional types and how to create it.
We will look at why and how conditional types are useful in real-world development.
Let’s take a look at the following code where we overload the func1() function by changing its return type based on the parameter types. We can observe that if the parameter type is boolean, the return type is string. Additionally, if the parameter types are string and number, the return types are number and boolean respectively.
1 2 3 4 5 6 |
|
We can overload this function by creating a conditional type with one definition in one line instead of writing multiple definitions in the function.
In the following example, we create a condition type named test_type. It gets the value and returns the type based on the value type. If the value's type is a number, it returns a Boolean value; for a string value, it returns a number, and for a Boolean value, it returns the string type.
In the output, we can observe the variable obtained from test_type and the type of abc variable.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
When compiled, it will generate the following JavaScript code:
// getting the type of abc variable based on the value from the conditional test_type var abc = 20; console.log("The type of the variable abc is " + typeof abc); var variable = false; console.log("The type of the variable is " + typeof variable);
The above code will produce the following output -
1 2 |
|
Since we have used conditional types for variables, we can use them for function parameters or return types.
Users in this tutorial learned to create conditional types that allow us to select a specific variable based on the type or value of another variable. Additionally, we learned how to use conditional types for function parameters and return types.
The above is the detailed content of How to create conditional types in TypeScript?. For more information, please follow other related articles on the PHP Chinese website!