Typescript Interface vs Type
Tags: programming, typescript, webdev, javascript
Published: 2023-02-26 10:23:33

In TypeScript, both an *interface* and a *type* Alias can be used to describe a new named type. this article will see what are the differences between them and what are the  best use cases for both types and interfaces in TypeScript

### 1. Declaration merging

In TypeScript, declaration merging happens when the compiler merges two or more interfaces of the same name into only one declaration.  and that is possible only with interfaces, if you try to declare two types of the same name, the compiler will throw an error.

Here is an example of declaration merging in TypeScript.

let's imagine we have two interfaces called Car

```tsx
interface Car {
  carName: string ;
};

interface Car {
  carNumber: number;
};

const car: Car = {
  carName: "ford",
  carNumber: 12345
}
```

In this example, we first declare the Car interface with one property. Then, we declare it another time, with a different property. Finally, the compiler merges both interfaces into one, since they share the same name.

if we change the interface into a type  like this 

```tsx
type Car = { 
  carName: string ;
};

type Car = {
  carNumber: number;
};
 // this is wrong don't do it
const car: Car = {     
  carName: "ford",
  carNumber: 12345
}
```

Typescript will throw us an error 

```tsx
Duplicate identifier Car 

'Car' is already defined.
```

Declaration merging does not work with types.

### 2. Extends

In Typescript, we can easily extend  interfaces .this is not possible with types 

Interfaces can extend classes which helps a lot in a more object-oriented way of programming.

for example, there is a class called Album and an interface called Song, we can easily extend this class using an interface  

```tsx
class Album {
  
  details = () => {
    console.log("show details of the album")
  }
};

interface Song extends Album {
  songName: string;
}
```

we can also extend an interface with another interface 

for example, an interface called Song can extend interface Singer 

```tsx
interface Singer {
  artistName: string;
}

interface Song extends Singer {
  songName: string;
}
```

if we tried to replace interface with type to extend, typescript will throw us an error 

```tsx
type Singer ={
  artistName: string;
}

type Song extends Singer ={  // this is wrong don't do it
  songName: string;
}
```

```tsx
Cannot find name 'extends'.
'Singer' only refers to a type, but is being used as a value here
```

### 3. **Implements**

In typescript, Both a *type* and an *interface* can be implemented by a class, and we can also create classes implementing interfaces. 

```tsx
interface ClockInterface {
  currentTime: Date;
}
 
class Clock implements ClockInterface {
  currentTime: Date = new Date();
  constructor(h: number, m: number) {}
}
```

You can also describe methods in an interface that are implemented in the class, as we do with `setTime` in the below example:

```tsx
interface ClockInterface {
  currentTime: Date;
  setTime(d: Date): void;
}
 
class Clock implements ClockInterface {
  currentTime: Date = new Date();
  setTime(d: Date) {
    this.currentTime = d;
  }
  constructor(h: number, m: number) {}
}
```

a class can also implement a type 

```tsx
type ClockInterface = {
  currentTime: Date;
}
 
class Clock implements ClockInterface {
  currentTime: Date = new Date();
  constructor(h: number, m: number) {}
}
```

### 4. ***Intersection***

Intersection allows the developer to merge two or more type declarations into a single type.

To create an intersection type, we have to use the `&` keyword 

Here is an example of how to combine two types with an intersection.

```tsx
type ErrorHandling = {
  success: boolean;
  error?: { message: string };
}
 
type ArtworksData = {
  artworks: { title: string }[];
}

type ArtworksResponse = ArtworksData & ErrorHandling;
```

also, we can create a new intersection type combining two interfaces 

```tsx
interface ErrorHandling  {
  success: boolean;
  error?: { message: string };
}
 
interface ArtistsData {
  artists: { name: string }[];
}
 
type ArtistsResponse = ArtistsData & ErrorHandling;
```

We cannot create an interface combining two types, because it doesn’t work:

```tsx
type Name ={
  name: "string"
};

type Age ={
  age: number
};

interface Person = Name & Age; // this is wrong don't do it
```

typescript will throw us an error 

```tsx
Parsing error: '{' expected.
'Name' only refers to a type, but is being used as a value here.
'Age' only refers to a type, but is being used as a value here.
```

### 5. ***Tuples***

  Tuples brought to us this new data type that includes two sets of values of different data types.

```tsx
type specialKindOfData = [string, number]
```

it is a very helpful concept in typescript, but we can only declare tuples using types and not interfaces.

but you still are able to use a tuple inside an interface.

for example.

```tsx
interface Data {
  value: [string, number] 
}
```

### 6. ***Unions***

A union type allows the developer to create a value of one or a few more types.

we have to use the `|` keyword to create a new union type, the combined declaration must always be a *type*

```tsx
type Cat = {
name: string;
};

type Dog = {
name: string;
};

type Animal = Cat | Dog;
```

Similar to intersections, we can create a new union type combining two interfaces,

```tsx
interface Cat {
    name: string;
}

interface Dog {
    name: string;
}

type Animal = Cat | Dog;
```

we can not combine two types into an interface because union type must be combined in a type only

### 7. **Primitive Types**

A primitive type can only be declared with a *type.*

```tsx
type data = string;
```

If you try to declare one with an *interface*, it will not work.

## ***Conclusion***

In this article, we learned about the difference between Interfaces and types, and learned the best use cases for both types and interfaces in TypeScript, and how we can apply both of them in real projects. .to decide if you should use a type or an interface, you should carefully think and analyze what you’re working on, and the specific code to make the right choice. the interface works better with objects and method objects, and types are better to work with functions, and complex types, you can use both together and they will work fine.