DEV Community

loading...
Cover image for TypeScript: The Difference Between Interface and Type

TypeScript: The Difference Between Interface and Type

saransh kataria
A curious full stack developer who loves challenges and getting things done.
Originally published at wisdomgeek.com ・3 min read

Once we start exploring TypeScript, we start using interfaces and types without really understanding the differences between them. I am guilty of doing that as well. It is simple to get started with them and keep using them. But, at some point, it becomes important to know the difference between interface and type.

After all, we can use either of these:

interface Point {
  x: number;
  y: number;
}
Enter fullscreen mode Exit fullscreen mode

or

type Point = {
  x: number;
  y: number;
}
Enter fullscreen mode Exit fullscreen mode

The difference between interface and type is more than just the minor syntax declaration. Let us get deeper into it.

Type and type aliases

TypeScript has primitive types such as boolean, number, string, etc. And if we want to declare advanced types, we use what are called type aliases.

Type aliases refer to the process of creating a new name for a type. It is important to note that we are not defining a new type. The “type” keyword we use to do so might lead us to believe that we are creating a new type, but we are only giving a type a new name.

So whenever someone refers to types, the reference is aimed at type aliases.

Interfaces

Interfaces, on the contrary to types, are restricted to object types. They are a way to describe an object and its properties. Type alias declarations can be used for any primitive type, unions, or intersections. In that regard, interfaces are restricted to object types.

Similarities of interface and type

Before getting into the differences, let us take a look at the similarities of interface and type.

Both can be extended

Both interface and type can be extended. The syntax is the only difference, yet again. Another note worth mentioning is that an interface and type alias are not mutually exclusive. A type alias can extend an interface and vice versa.

For an interface, extending another interface:

interface PartialPointX { x: number; }
interface Point extends PartialPointX { y: number; }
Enter fullscreen mode Exit fullscreen mode

Or, extending a type:

type PartialPointX = { x: number; };
interface Point extends PartialPointX { y: number; }
Enter fullscreen mode Exit fullscreen mode

For a type extending another type:

type PartialPointX = { x: number; };
type Point = PartialPointX & { y: number; };
Enter fullscreen mode Exit fullscreen mode

or extending an interface:

interface PartialPointX { x: number; }
type Point = PartialPointX & { y: number; };
Enter fullscreen mode Exit fullscreen mode

Implements

A class can implement both an interface as well as a type (TS 2.7+).

A class cannot however implement a union type.

interface Point {
  x: number;
  y: number;
}

class SomePoint implements Point {
  x = 1;
  y = 2;
}

type AnotherPoint = {
  x: number;
  y: number;
};

class SomePoint2 implements AnotherPoint {
  x = 1;
  y = 2;
}

type PartialPoint = { x: number; } | { y: number; };

// Following will throw an error
class SomePartialPoint implements PartialPoint {
  x = 1;
  y = 2;
}
Enter fullscreen mode Exit fullscreen mode

Union and intersection types

Though interfaces can be extended and merged (next point), they cannot be composed together in the form of unions and intersections. Types can make use of union and intersection operators to form new types.

// object
type PartialPointX = { x: number; };
type PartialPointY = { y: number; };

// union
type PartialPoint = PartialPointX | PartialPointY;

// intersection
type PartialPoint = PartialPointX & PartialPointY;
Enter fullscreen mode Exit fullscreen mode

Declaration merging

The TypeScript compiler merges two or more interfaces that have the same name into a single declaration. This does not work for types. If we try and create two types with the same name but different properties, the TypeScript compiler will throw an error.

// These two declarations become:
// interface Point { x: number; y: number; }
interface Point { x: number; }
interface Point { y: number; }

const point: Point = { x: 1, y: 2 };
Enter fullscreen mode Exit fullscreen mode

Tuple types

Tuples (key-value pairs) can only be typed via the type keyword.

type Point = [x: number, y: number];
Enter fullscreen mode Exit fullscreen mode

There is no way to declare a tuple using an interface.

We can use a tuple inside an interface though:

interface Point { coordinates: [number, number] }
Enter fullscreen mode Exit fullscreen mode




Which one should I use?

In general, both interface and type are pretty similar as noted before.

For public API definitions in a library or third-party type definition, an interface should be used to provide declaration merging capabilities.

Apart from that, we can use whichever we want, but there should be consistency across the codebase.

And that is all there is to know about interface vs type in TypeScript. Hope this helped you learn something about each and if you did, please share it with your friends!

Originally published at https://www.wisdomgeek.com on May 13, 2021.

Discussion (4)

Collapse
ninofiliu profile image
Nino Filiu • Edited

Also, an interface can be extended in several locations while a type has to be fully defined in one place. For me that's +100pts for types because when I can be sure by looking at a type def that I have the whole object, while interfaces definitions can be scattered all around, possibly in different files:

// ok
interface IUser { name: string }
interface IUser { age: number }
const ifn = (user: IUser) => `${user.name} is ${user.age} years old`

// error
type TUser = { name: string }
type TUser = TUser & { age: number }

// ok
type TUser = { name: string; age: number }
const tfn = (user: TUser) => `${user.name} is ${user.age} years old`
Enter fullscreen mode Exit fullscreen mode

docs / playground

Collapse
saranshk profile image
saransh kataria Author

Agreed, declaration merging sure can introduce some tricky things.

Collapse
pobx profile image
Pobx

Actually, I use interface for user-defined. my personal never used type. after read this article. It's make me clear both of it. Thank you for your explanation. Next time maybe I will use type for defined some thing with tuple.

Collapse
saranshk profile image
saransh kataria Author

Glad the article was helpful!