What are Intersection Types in typescript?

In this tutorial, we will learn what are Intersection types in TypeScript.

With the help of TypeScript, we may mix various types to produce more comprehensive and effective use cases. You can learn how to build union and intersection types more effectively in TypeScript by knowing the design concept behind them.

In TypeScript, a notion known as "Intersection Types" effectively enables us to combine different types.

We can combine different type definitions and utilize existing ones by using intersection types. Although intersection and union types in Typescript are similar, they are used in very different ways. A type that combines different sorts into one is called an intersection type. This enables you to combine many types to produce a single type with all the necessary attributes. Members from each of the provided types will be present in an object of this type. The intersection type is made using the '&' operator.

Avoid letting the intersection word guide you wrong and mistaking mathematical sets with logic. When two types intersect in TypeScript, the intersection type will inherit the characteristics of both intersecting types. Take caution when combining types that share property names with different kinds.

Syntax

We can write the below syntax to use the Intersection type in TypeScript.

type variable_3 = variable_1 & variable_2;
let var: variable_3; // All of the attributes from variable_1 and variable_2 apply to the variable var.

As we can see in the above syntax, here we intersect the two variables, i.e., variable_1 and variable_2, and store the value in variable_3. After that, the attributes of variable_3 are stored in var.

Example

As we can see in the below example, here we have created two interfaces named “Book” and “Author”. Now inside the Book, we have created two fields named “book_id”, which is of number type, and “book_name”, which is of string type. And inside the Author, we have also created two fields named “author_id”, which is of number type, and “author_name”, which is of string type. Next, we intersected the Book and Author interface and stored it into intersected_types. Finally, values are retrieved from an object of the intersection type created.

interface Book {
   book_id: number
   book_name: string
}

interface Author {
   author_id: number
   author_name: string
}

type intersected_type = Book & Author

let intersected_type_object1: intersected_type = {
   book_id: 101,
   book_name: 'Typescript is Awesome',
   author_id: 202,
   author_name: 'Tutorialspoint!',
}

console.log('Book Id: ' + intersected_type_object1.book_id)
console.log('Book name: ' + intersected_type_object1.book_name)
console.log('Author Id: ' + intersected_type_object1.author_id)
console.log('Author name: ' + intersected_type_object1.author_name)

On compiling, it will generate the following JavaScript code −

var intersected_type_object1 = {
   book_id: 101,
   book_name: 'Typescript is Awesome',
   author_id: 202,
   author_name: 'Tutorialspoint!'
};
console.log('Book Id: ' + intersected_type_object1.book_id);
console.log('Book name: ' + intersected_type_object1.book_name);
console.log('Author Id: ' + intersected_type_object1.author_id);
console.log('Author name: ' + intersected_type_object1.author_name);

Output

The above code will produce the following output &minuns;

Book Id: 101
Book name: Typescript is Awesome
Author Id: 202
Author name: Tutorialspoint!

As users can see in the output, all the values of two different interfaces are combined and displayed.

Intersection types are Associative and Commutative

The commutative property indicates that an equation's factors can be freely rearranged without altering the equation's outcome.

commutative property: (A & B) = (B & A)

Associative property asserts that altering how integers are grouped during an operation will not affect the equation's solution.

associative property: (A & B) & C = A & (B & C)

When we cross two or more kinds, it doesn't matter what order they are in. The 'typeof' operator is used to verify that the attributes of the intersected objects are also the same, regardless of how the items are intersected or in what order.

Example

As we can see in the below example, here we have created three interfaces named “Student”, “Class”, and “Subject”. Now inside the Student, we have created two fields called “student_id”, which is of number type, and “sudent_name”, which is of string type. Inside the “Class” instance, we have also created two fields named “class_id”, which is of number type, and “class_name”, which is of string type. Inside the “Subject” instance, we have also created two fields named “subject_id”, which is of number type, and “subject_name”, which is of string type.

Next, we intersected the Book, Author, and Subject interface using associative property and stored it into intersected types. After that, values are retrieved from an object of the intersection type created. Finally, we checked the objects using the typeof operator and logged in to the console.

interface Student {
   student_id: number
   student_name: string
}

interface Class {
   class_id: number
   class_name: string
}

interface Subject {
   subject_id: number
   subject_name: string
}

type intersected_type_1 = (Student & Class) & Subject
type intersected_type_2 = Student & (Class & Subject)

let intersected_type_object1: intersected_type_1 = {
   student_id: 101,
   student_name: 'Typescript',
   class_id: 10,
}

let intersected_type_object2: intersected_type_2 = {
   student_id: 102,
   student_name: 'Typescript2',
   class_id: 11,
}

console.log(typeof intersected_type_object1 === typeof intersected_type_object2)

On compiling, it will generate the following JavaScript code −

var intersected_type_object1 = {
   student_id: 101,
   student_name: 'Typescript',
   class_id: 10
};
var intersected_type_object2 = {
   student_id: 102,
   student_name: 'Typescript2',
   class_id: 11
};
console.log(typeof intersected_type_object1 === typeof intersected_type_object2);

Output

The above code will produce the following output −

true

As users can see in the output, both the attributes of the objects are identical, showing the true value.