How to create conditional types in TypeScript?

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.

grammar

Users can create conditional types in TypeScript according to the following syntax.

first_type extends second_type ? true_type : false_type;

We use the ternary operator in the above syntax to create conditional types.

Explanation of operands

• 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.

Example

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.

// Creating the first interface
interface interface1 {
   prop1?: string;
   prop2: boolean;
}

// creating the second interface and extending it with the interface1
interface interface2 extends interface1 {
   prop3?: number;
   prop4: boolean;
}

// type of the type1 is number as interface2 extends interface1
type type1 = interface2 extends interface1 ? number : string;
let var1: type1 = 20;

// type of the type2 is string as interface1 doesn't extends the interface2
type type2 = interface1 extends interface2 ? number : string;
let var2: type2 = "Hello";

console.log("The type of var1 variable is " + typeof var1);
console.log("The type of var2 variable is " + typeof var2);

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);

Output

The above code will produce the following output -

The type of var1 variable is number
The type of var2 variable is string

We have learned the basics of conditional types and how to create it.

Why use conditional types?

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.

function func1(param1: boolean): string;
function func1(param1: string): number;
function func1(param1: number): boolean;
function func1(param1: any): any {
   // function body of the overloaded function
}

We can overload this function by creating a conditional type with one definition in one line instead of writing multiple definitions in the function.

Example

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.

// creating the conditional type
// it will accept the number, string, and boolean values
type test_type<T extends number | string | boolean> = T extends number
  ? boolean
  : T extends string
  ? number
  : string;
// getting the type of abc variable based on the value from the conditional test_type
let abc: test_type<"hello"> = 20;
console.log("The type of the variable abc is " + typeof abc);

let variable: test_type<typeof abc> = false;
console.log("The type of the variable is " + typeof variable);

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);

Output

The above code will produce the following output -

The type of the variable abc is number
The type of the variable is boolean

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!