How to create conditional types in TypeScript?

In TypeScript, we need to define the types for every variable and object as it is a type of strict language and also contains conditional types.

From the word conditional type, we can predict that we need to choose a variable based on a particular condition. Yes, you heard right. As we use an if-else statement to execute the particular code block based on a certain condition, we can also choose a type of variable based on a certain condition.

In this tutorial, we will learn to create condition types in TypeScript.

Syntax

Users can follow the syntax below to create a conditional type in TypeScript.

first_type extends second_type ? true_type : false_type;

We used the ternary operator in the above syntax to create a conditional type.

Operands explanation

• First_type − It is a type or variable.

• Second_type − It is a type like a number, string, Boolean, etc.

• True_type − If the first_type contains the second_type, true_type will be assigned to the variable.

• False_type − If first_type doesn’t extend the second_type, false_type will be assigned to the variable.

Now, we will look at the different examples to learn more about conditional types in TypeScript.

Example

In the example below, we have defined two interfaces. In TypeScript, the interface also works the same as the type alias, as it defines the structure of an object or class.

After that, we extended interface2 with interface1. It means interface2 contains all properties of interface1. After that, we used the ternary operator to assign the conditional type to type1 and type2 aliases.

In the output, users can check out the type of the 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);

On compiling, 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 the conditional type and how to create it.

Why Conditional Types?

We will learn why and how conditional types are useful in real-life development.

Let’s look at the below code in which we have overloaded the func1() function by changing its return type according to the parameter type. We can observe that if the parameter type is boolean, the return type is a string. Furthermore, if the parameter type is string and number, the return type is 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 the function by creating the condition type in a single line with one definition rather than writing multiple definitions in the function.

Example

In the example below, we have created the conditional type named test_type. It takes the value and returns the type according to the value type. If the type of the value is a number, it returns a boolean; for string values, it returns a number, and for boolean values, it returns the string type.

In the output, we can observe the type of the variable and abc variable, which we got from the test_type.

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

On compiling, 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

As we have used the conditional type for a variable, we can use it for the function parameters or return type.

Users learned to create conditional types in this tutorial, allowing us to choose a particular variable based on another variable’s type or value. Also, we learned to use the conditional type for function parameters and return type.