Difference Between Type and Interface in Typescript

1. Introduction

This post provides a detailed explanation of the differences between type and interface in TypeScript, including their characteristics, example usage, and guidelines on when to use each.

An interface in TypeScript is a way to describe the shape of an object, providing a contract that an object can implement. A type, on the other hand, is more versatile and can represent the shape of an object but can also represent other types like unions and intersections.

2. Key Points

1. Declaration Merging 

Interface: Interfaces in TypeScript support declaration merging. This means you can declare the same interface multiple times, and TypeScript will merge these declarations into a single interface. This is particularly useful in extending existing interfaces or in library declaration files. 

Type: Type aliases cannot be re-declared. Once a type is defined, that's the final shape of it, and it can't be modified or extended further in the same way interfaces can. 

2. Extending 

Interface: Interfaces can extend other interfaces, allowing for a more hierarchical and structured approach to type composition. 

Type: Types can extend other types using intersections, but the syntax and approach are a bit different compared to interfaces. Types also have more flexibility in that they can represent not just the shape of objects but also the union and intersection of other types. 

3. Implementation 

Interface: An interface can be implemented by a class, which then requires the class to adhere to the structure of the interface. 

Type: Type aliases cannot be implemented in a class. They are purely for type-checking and cannot be used to enforce a class structure. 

4. Use in Different Constructs 

Interface: Interfaces are more suited for defining object shapes that will be used in more traditional object-oriented ways like being implemented by classes. 

Type: Types are more versatile in how they can be used, supporting a wider range of patterns including union, intersection, and primitive types. 

5. Computational Properties 

Type: Types can compute properties (using mapped types) which can be useful for more advanced type transformations. 

Interface: Interfaces do not support computed properties. 

6. Intention and Readability 

Interface: Using an interface signals that you're defining the shape of an object that should be implemented or extended. 

Type: Using a type alias often signals that you might be defining a union, intersection, or a more complex type that isn't just an object shape.

3. Differences

Characteristic	Type	Interface
Extension	No extension, uses intersections	Can be extended
Declaration Merging	Does not support	Supports declaration merging
Use Case	More flexible for utility types	Ideal for defining object shapes
Compatibility	Interchangeable in many cases	More extensible

4. Example

// Example of Type
type PersonType = {
    name: string;
    age: number;
};

// Example of Interface
interface PersonInterface {
    name: string;
    age: number;
}

// Extending an Interface
interface EmployeeInterface extends PersonInterface {
    department: string;
}

// Using Type with Intersection
type EmployeeType = PersonType & { department: string };

Output:

No direct output as these are structural examples.

Explanation:

1. PersonType is a type that defines the shape of a person object.

2. PersonInterface is an interface with the same purpose.

3. EmployeeInterface extends PersonInterface, adding a new field.

4. EmployeeType uses intersection to combine PersonType with an additional field.

5. When to use?

- Use type when you need to define utility types or when you need to use unions or intersections.

- Use interface when you are creating complex object types that might be extended or implemented by other interfaces or classes.