Type vs Interface in TypeScript with Examples

TypeScript, a superset of JavaScript, introduces static typing to the JavaScript ecosystem, enabling developers to catch errors early and write more maintainable code.

Among the powerful features of TypeScript are types and interfaces, both of which allow you to define the shape of an object.

However, choosing between them can be confusing for newcomers. In this tutorial, we will explore the differences between type vs interface in TypeScript, including their use cases and examples.

Introduction

Types and interfaces in TypeScript serve similar purposes but have distinct features and use cases. Understanding these differences is crucial for writing clean and efficient TypeScript code.

What are the Types in TypeScript?

A type in TypeScript is a way to define a custom type. It can represent a union, intersection, or any other complex type. Types are defined using the type keyword.

Example of a Type in TypeScript

type User = {
  name: string;
  age: number;
  isActive: boolean;
};

function printUserInfo(user: User): void {
  console.log(`Name: ${user.name}`);
  console.log(`Age: ${user.age}`);
  console.log(`Active: ${user.isActive ? "Yes" : "No"}`);
}

const user1: User = {
  name: "Alice",
  age: 25,
  isActive: true,
};

printUserInfo(user1);

Types can be used for more than just object shapes. They can also represent unions, intersections, and more complex types.

Union Types in TypeScript

type StringOrNumber = string | number;

Intersection Types in TypeScript

type Name = {
  firstName: string;
  lastName: string;
};

type Contact = {
  email: string;
  phone: string;
};

type Person = Name & Contact;

What is an Interface in TypeScript?

An interface in TypeScript is used to define the shape of an object. Interfaces are declared using the interface keyword and are primarily used for defining object structures.

Example of an Interface in TypeScript

interface Person {
  name: string;
  age: number;
  greet(): void; 
}

const student: Person = {
  name: "Alice",
  age: 22,
  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  },
};

student.greet();

Interfaces can extend other interfaces, which makes them powerful for creating complex object shapes.

Extending Interfaces in TypeScript

interface Name {
  firstName: string;
  lastName: string;
}

interface Contact {
  email: string;
  phone: string;
}

interface Person extends Name, Contact {}

Key Differences Between Type vs Interface in TypeScript

Below, I will explain the difference between a type and an interface in TypeScript.

Declaration

Type: Declared using the type keyword.
Interface: Declared using the interface keyword.

Extensibility

Type: Types can be extended using intersections.
Interface: Interfaces can extend other interfaces or types.

Use Cases

Type: Suitable for complex type definitions involving unions, intersections, and other advanced types.
Interface: Ideal for defining the shape of objects, and when you need to use interfaces in classes.

Example of Extending Types

type Name = {
  firstName: string;
  lastName: string;
};

type Contact = {
  email: string;
  phone: string;
};

type Person = Name & Contact;

Example of Extending Interfaces

interface Name {
  firstName: string;
  lastName: string;
}

interface Contact {
  email: string;
  phone: string;
}

interface Person extends Name, Contact {}

When to Use Type vs Interface

Use Cases for Type

Unions and Intersections: Types are more flexible in creating complex types using unions and intersections.
Primitive Types: When defining a type alias for primitive types or tuples.
Function Signatures: Suitable for defining function signatures.

Use Cases for Interface

Object Shapes: Best for defining the shape of an object.
Class Implementations: When you need to use implementations in classes.
Extensibility: Interfaces provide a more readable and structured way to extend and implement object shapes.

Examples of Type & Interface in TypeScript

Below, I will explain the different examples of types and interfaces in TypeScript.

Using Type for Function Signatures

type Greet = (name: string) => string;

const greet: Greet = (name) => `Hello, ${name}`;

Using Interface for Object Shapes

interface User {
  id: number;
  name: string;
  email: string;
}

const user: User = {
  id: 1,
  name: 'John Doe',
  email: 'john.doe@example.com'
};

Combining Type and Interface

You can combine types and interfaces to leverage the strengths of both.

type Address = {
  street: string;
  city: string;
  state: string;
  zipCode: string;
};

interface User {
  id: number;
  name: string;
  email: string;
  address: Address;
}

Summary Table

Feature	Type	Interface
Declaration	`type` keyword	`interface` keyword
Extensibility	Via intersections	Via `extends` keyword
Use Cases	Unions, intersections, primitives	Object shapes, class implementations
Function Signatures	Suitable	Less common
Object Shapes	Can be used	Ideal

Conclusion

Understanding the differences between types and interfaces in TypeScript is essential for writing robust and maintainable code. While both can define the shape of an object, they have unique features and use cases that make them suitable for different scenarios.

Types are more versatile and can handle complex type definitions, whereas interfaces are ideal for defining object shapes and extending them in a structured manner.

By leveraging the strengths of both types and interfaces, you can write cleaner, more maintainable TypeScript code that is easier to understand and debug.

Whether you’re defining a simple object shape or a complex type, knowing when to use type and when to use interface will help you make the most of TypeScript’s powerful type system.

Type vs Interface in TypeScript