Intersection Types in TypeScript

An intersection type combines two or more types into one type.

type A = {
    name: string;
};

type B = {
    age: number;
};

type Person = A & B;

The Person type must contain both name and age.

The basic syntax is:

type Combined = TypeA & TypeB;

The & symbol means that the resulting value must satisfy both types.

Two object types can be combined using an intersection.

type Person = {
    name: string;
};

type Employee = {
    employeeId: number;
};

type EmployeePerson =
    Person & Employee;

const employee: EmployeePerson = {
    name: "Amit",
    employeeId: 101
};

The resulting type contains properties from all source types.

type Name = {
    name: string;
};

type Contact = {
    phone: string;
};

type Address = {
    city: string;
};

type User =
    Name &
    Contact &
    Address;

const user: User = {
    name: "Amit",
    phone: "9876543210",
    city: "Patna"
};

An object assigned to an intersection type must satisfy every required property.

type Person = {
    name: string;
};

type Student = {
    course: string;
};

type StudentPerson =
    Person & Student;

// Correct
const student: StudentPerson = {
    name: "Amit",
    course: "TypeScript"
};

If a required property from one of the types is missing, TypeScript reports an error.

type Person = {
    name: string;
};

type Student = {
    course: string;
};

type StudentPerson =
    Person & Student;

// Incorrect:
// const student: StudentPerson = {
//     name: "Amit"
// };

The course property is required.

Interfaces can also participate in intersection types.

interface Person {
    name: string;
}

interface Student {
    course: string;
}

type StudentPerson =
    Person & Student;

const student: StudentPerson = {
    name: "Amit",
    course: "TypeScript"
};

A type alias can combine interfaces with an intersection.

interface Person {
    name: string;
}

interface Contact {
    phone: string;
}

type User =
    Person & Contact;

const user: User = {
    name: "Rahul",
    phone: "9876543210"
};

You can combine three or more types.

type Person = {
    name: string;
};

type Contact = {
    phone: string;
};

type Employee = {
    employeeId: number;
};

type EmployeeDetails =
    Person &
    Contact &
    Employee;

const employee: EmployeeDetails = {
    name: "Amit",
    phone: "9876543210",
    employeeId: 101
};

Intersection types can contain optional properties.

type Person = {
    name: string;
};

type Contact = {
    phone?: string;
    email?: string;
};

type User =
    Person & Contact;

const user: User = {
    name: "Amit"
};

The name property is required, while phone and email are optional.

Intersection types can also contain readonly properties.

type Identity = {
    readonly id: number;
};

type Person = {
    name: string;
};

type User =
    Identity & Person;

const user: User = {
    id: 101,
    name: "Amit"
};

// user.id = 102; // Error

An intersection can combine an object structure with other compatible type information.

type Student = {
    name: string;
};

type StudentList = Student[];

const students: StudentList = [
    {
        name: "Amit"
    },
    {
        name: "Rahul"
    }
];

Here, StudentList is a type alias for an array of student objects.

Types can also be combined when a value has both object properties and callable behavior.

type UserData = {
    name: string;
};

type UserFunction = {
    (): string;
};

Intersection types can be used for advanced function and object patterns.

Intersections can combine function signatures to describe overloaded functions.

type StringFunction = {
    (value: string): string;
};

type NumberFunction = {
    (value: number): number;
};

type CombinedFunction =
    StringFunction &
    NumberFunction;

Intersection and union types have different meanings.

type A = {
    name: string;
};

type B = {
    age: number;
};

type Union =
    A | B;

type Intersection =
    A & B;

A union represents one of the possible types, while an intersection requires the value to satisfy both types.

With a union, a value can match one of the types.

type Student = {
    name: string;
};

type Teacher = {
    subject: string;
};

type User =
    Student | Teacher;

The value can represent a student or a teacher.

With an intersection, the value must satisfy both types.

type Student = {
    name: string;
};

type Teacher = {
    subject: string;
};

type Person =
    Student & Teacher;

const person: Person = {
    name: "Amit",
    subject: "TypeScript"
};

Intersection types can combine types containing nested objects.

type Personal = {
    name: string;

    contact: {
        phone: string;
    };
};

type Academic = {
    course: string;

    marks: number[];
};

type Student =
    Personal &
    Academic;

const student: Student = {
    name: "Amit",

    contact: {
        phone: "9876543210"
    },

    course: "TypeScript",

    marks: [
        80,
        90
    ]
};

Intersection types can be combined with literal properties.

type Admin = {
    role: "admin";
    name: string;
};

type ActiveUser = {
    status: "active";
};

type ActiveAdmin =
    Admin &
    ActiveUser;

const user: ActiveAdmin = {
    role: "admin",
    name: "Amit",
    status: "active"
};

Generic types can also be combined with intersection types.

type Box<T> = {
    value: T;
};

type Named = {
    name: string;
};

type NamedBox<T> =
    Box<T> & Named;

const item: NamedBox<number> = {
    value: 100,
    name: "Score"
};

Interfaces can extend other interfaces using extends.

interface Person {
    name: string;
}

interface Student
    extends Person {

    course: string;
}

The same object structure can be created with an intersection.

type Person = {
    name: string;
};

type Student =
    Person & {
        course: string;
    };

Separate types can be created for reusable pieces of data and combined when needed.

type HasId = {
    id: number;
};

type HasName = {
    name: string;
};

type HasEmail = {
    email: string;
};

type User =
    HasId &
    HasName &
    HasEmail;

const user: User = {
    id: 101,
    name: "Amit",
    email: "amit@example.com"
};

Intersection types can combine common and component-specific React props.

type CommonProps = {
    id: number;
    title: string;
};

type ButtonProps = {
    variant:
        "primary" |
        "secondary";
};

type Props =
    CommonProps &
    ButtonProps;

function Button(
    props: Props
) {

    return (
        <button>
            {props.title}
        </button>
    );
}

React Native props can also be composed from reusable types.

type CommonProps = {
    title: string;
};

type ButtonProps = {
    variant:
        "primary" |
        "danger";
};

type Props =
    CommonProps &
    ButtonProps;

const Button = (
    props: Props
) => {

    return (
        <View>
            <Text>
                {props.title}
            </Text>
        </View>
    );
};

Intersection types can combine common API fields with specific response fields.

type ApiBase = {
    id: number;
    createdAt: string;
};

type ProductData = {
    name: string;
    price: number;
};

type Product =
    ApiBase &
    ProductData;

const product: Product = {
    id: 101,
    createdAt: "2026-10-01",
    name: "Laptop",
    price: 50000
};

A common mistake is forgetting that every required property from every intersected type must be present.

type Person = {
    name: string;
};

type Employee = {
    employeeId: number;
};

type User =
    Person &
    Employee;

// Incorrect:
// const user: User = {
//     name: "Amit"
// };

The employeeId property is also required.

Intersection types are useful when a value needs to combine multiple independent structures.

• Combining user identity and contact information
• Combining common and specific API fields
• Creating reusable React props
• Creating reusable React Native props
• Combining multiple object structures
• Building complex types from smaller types

type A = {
    name: string;
};

type B = {
    age: number;
};

type Union =
    A | B;

type Intersection =
    A & B;

Union: represents one of the possible types.

Intersection: combines the requirements of all the types.

type Identity = {
    readonly id: number;
    name: string;
};

type Contact = {
    phone: string;
    email: string;
};

type Academic = {
    course: string;
    marks: number[];
};

type Student =
    Identity &
    Contact &
    Academic;

const student: Student = {

    id: 101,

    name: "Amit",

    phone: "9876543210",

    email: "amit@example.com",

    course: "TypeScript",

    marks: [
        80,
        85,
        90
    ]

};

console.log(
    student.id
);

console.log(
    student.name
);

console.log(
    student.phone
);

console.log(
    student.course
);

console.log(
    student.marks
);

Intersection types combine multiple types into one type. The resulting value must satisfy all the combined types.

type Person = {
    name: string;
};

type Employee = {
    employeeId: number;
};

type EmployeePerson =
    Person &
    Employee;

const employee: EmployeePerson = {
    name: "Amit",
    employeeId: 101
};

The & operator is used to create an intersection type.