Extended in Typescript is like inheritance in C++.
Intersection in Typescript means that the new object will
have all the members of the intersected classes.

Why do we need intersection when while using extends
keyword we can get all the members of both classes in
the derived class?

What is the use case of intersection where extension
would not be preferred?

.html#intersection-types

Extended in Typescript is like inheritance in C++.
Intersection in Typescript means that the new object will
have all the members of the intersected classes.

Why do we need intersection when while using extends
keyword we can get all the members of both classes in
the derived class?

What is the use case of intersection where extension
would not be preferred?

https://www.typescriptlang/docs/handbook/2/objects.html#intersection-types

• javascript
• typescript

• Read about inheritance vs. position. – axiac Commented May 12, 2021 at 6:02
• An intersection is a subset of each set forming the intersection. Not a superset. An intersection type does not have some members of the types forming the intersection type. – Naetmul Commented May 12, 2021 at 6:05
• You can only extend interfaces and classes meaning in most cases you won't have an option to choose one or the other. Also inheritance follows OOP rules while position follows more set theoretical rules so they will behave differently in certain circumstances – apokryfos Commented May 12, 2021 at 6:11

1 Answer 1

They work quite similar, but here are some differences:

1. extends can be used only with types with statically known members:

type SimpleType = {x: string};
interface SimpleInterface extends SimpleType {} // ok
type ComplexType = {x: string} | {x: number};
// error: An interface can only extend an object type or intersection of object types with statically known members.
interface ComplexInterface extends ComplexType {}

Type intersection is a general type operation that can be performed on any two types and will give a result; extends is limited to interfaces and interface-like types (and classes).

2. When extending from a parent interface, you are not allowed to create fields with the same name as in parent, but with wider type:

interface Parent {
    x: string | number;
}
interface Child1 extends Parent {
    x: string; // ok
}
interface Child2 extends Parent {
    x: string | number | boolean; // error
}

However, type intersection does not plain:

type IntersectedChild = Parent & {x: string | boolean}; // ok
// IntersectedChild will have property 'x' that is an intersection
// of 'string | number' and 'string | boolean', that is a 'string':
type IntersectedChildX = IntersectedChild['x']; // string

3. When using extends with classes, child class will actually inherit all implementations of its parent; however type intersection only works on type level, so if you have classes A and B and type C = A & B, C is not a class but just a type, and you will need to somehow manually construct an object that will satisfy the contstraints of C (has all members of A and B with the same visibility levels).

Here is a playground link with examples I put above.