What is the difference between using an interface and a type in TypeScript?

Product Support LT Browser
,
#1

How do they compare in terms of typescript interface vs type?

What is the difference between these statements in TypeScript?

interface X { a: number; b: string; }

type X = { a: number; b: string; };

#2

Hey Klyni_gg,

In TypeScript, one key difference between interface and type is how they handle extensibility. Interfaces can be extended using the extends keyword, which allows you to create new interfaces by combining existing ones. This can be particularly useful for creating complex types by building on simpler ones.

interface X { a: number; b: string; }

interface Y extends X { c: boolean; }

With type, you can achieve a similar result using intersection types (&), but the syntax and approach differ.

type X = { a: number; b: string; }

type Y = X & { c: boolean; }

#3

Hello Kyni_gg,

Another difference lies in declaration merging. Interfaces in TypeScript can be merged, meaning if you declare the same interface multiple times, TypeScript will merge their properties. This is not possible with type aliases. interface X { a: number; }

interface X { b: string; }

// Merged interface X now has both a and b const obj: X = { a: 1, b: ‘test’ };

For type, if you try to declare the same type alias multiple times, TypeScript will throw an error.

type X = { a: number; }

type X = { b: string; }

// Error: Duplicate identifier ‘X’

#4

Hello Klyni,

Interfaces are generally preferred for defining shapes of objects, especially when those shapes are likely to be extended or implemented by classes. They are ideal for defining contracts in your code.

interface X { a: number; b: string; }

class Example implements X { a: number; b: string;

constructor(a: number, b: string) {
    this.a = a;
    this.b = b;
}

}

On the other hand, type aliases are more versatile and can represent not only object shapes but also other types such as union types, tuples, and more complex type expressions.

while both interface and type can be used to define object shapes, interfaces are more suited for extensibility and declaration merging, while type aliases offer greater flexibility in representing various kinds of types.