Prefer interfaces composition to types intersections

[vasilii-kovalev]

Now

I've seen that in this project, types intersections are used instead of interfaces composition to combine types (like a component's properties).
The problems with this approach are described here: Preferring Interfaces Over Intersections.

To Do

Use interfaces composition instead of types intersections.

Examples

Extending interfaces without conflicts

interface Type1 {
  field1: number;
}

-type Type2 = Type1 & {
-  field2: boolean;
-};
+interface Type2 extends Type1 {
+  field2: boolean;
+}

Extending interfaces with conflicts

interface Type1 {
  field1: number;
  field2: boolean;
}

// Implicit conflict for `field1`.
- type Type2 = Type1 & {
-  field1: string;
-}
- type Field1 = Type2["field1"]; // never
+interface Type2 extends Omit<Type1, "field1"> {
+  field1: string;
+}
+ type Field1 = Type2["field1"]; // string

[AlekseyManetov]

The approach using types and intersection was intentionally chosen because we rely on it for the type override mechanism in our components, especially in cases involving custom themes (e.g., replacing one set of colors or sizes with another).

We were able to make this work only by using types with intersection. I believe it worked for us due to different intersection merging mechanism, which, in the article you mentioned, is considered a downside (but for us, it turned out to be an advantage). You can read more about the approach we are using here: Overcoming Type Restrictions: A Journey Through Module Augmentation in TypeScript.

We fully moved the intersection approach more than half a year ago and haven’t encountered any significant drawbacks or challenges with it. However, I think it’s a valid consideration point for new projects that are deciding which approach to use, especially if they don’t have specific requirements like ours.