TypeScript Explained: Type and Interface

In this article, We will dive deep into the differences between ‘type’ and ‘interfaces’ in TypeScript, along with their advantages and disadvantages. Let’s get started!

Type

In typescript, the type keyword is used to create custom type definitions. It allows you to define a new type by specifying the structure, constraints, and composition of the values it can hold.

When to use

• Defining Union or Intersection Types: When you need to create a type that can hold multiple types, such as a variable that can be either a number or a string, you can use type to define a union type:

type size = 'small' | 'medium' | 'large';

• Creating Complex Type Combinations: If you need to combine multiple types to create a more complex type, such as combining properties from different types.

type Human = {
  name: string;
  age: number;
}

type Power = string;

type SuperHuman = Human & Power;

const batman: SuperHuman = {
  name: 'Batman',
  age: 32,
  power: 'wealth'
}

• Creating Aliases for Existing Types: When you want to give a more meaningful name to an existing type, you can use type to create an alias:

type customerId = number;
type customerAge = number;

• Documenting Function Signatures: If you have a function with a complex signature or multiple parameter types, using type can provide clarity and improve code readability:

type SendMessage = (message: string, recipient: string) => void;

const sendMailToRecipient: sendMessage = (message, recipient) => {
  console.log(`Message sent to ${recipient}!`);
}

Pros

• It allows you to create complex type combinations easily.
• It provides flexibility in combining different types.

Cons

• It cannot be implemented or extended by classes.

Interface

In TypeScript, an interface is a way to define a structure of an object. It allows you to specify the properties, methods, and types that an object must have to adhere to the defined interface.

When to use

• Defining Object structure: When you want to specify the structure and shape of an object, interfaces provide a clean and intuitive way to define its properties and their types:

interface Person {
  name: string;
  age: number;
}

• Describing Class Contracts: If you are working with classes and want to define a contract that specifies certain properties or methods that must be implemented, interfaces are a natural choice:

interface Printable {
  print(): void;
}

• Extending Interfaces: Interfaces can be extended to inherit properties and methods from other interfaces, facilitating code reuse and promoting modularity:

interface Car {
  brand: string;
  model: string;
  start(): void;
  stop(): void;
}

interface ElectricCar extends Car {
  batteryCapacity: number;
  charge(): void;
}

• Implementing Interfaces: Classes can implement interfaces, ensuring they adhere to a specific contract and providing a way to enforce consistency across multiple classes:

class Tesla implements ElectricCar {
  brand: string;
  model: string;
  batteryCapacity: number;

  constructor(brand: string, model: string, batteryCapacity: number) {
    this.brand = brand;
    this.model = model;
    this.batteryCapacity = batteryCapacity;
  }

  start() {
    console.log(`Starting the ${this.brand} ${this.model} electric car.`);
  }

  stop() {
    console.log(`Stopping the ${this.brand} ${this.model} electric car.`);
  }

  charge() {
    console.log(`Charging the ${this.brand} ${this.model} electric car.`);
  }
}

Pros

• It provides a clear and concise syntax for defining object shapes and class contracts.

• It supports inheritance and allows for extending or implementing interfaces.

  Cons

• It cannot represent union or intersection types directly.

• It might not be as flexible for defining complex type combinations as ‘type’.

In conclusion, understanding when to use ‘type’ and ‘interface’ for custom type definitions in TypeScript is crucial for writing clean and maintainable code. Both ‘type’ and ‘interface’ serve similar purposes but have distinct features and use cases. With this understanding, you can use TypeScript and make informed decisions when choosing between ‘type’ and ‘interface’ for your custom type definitions.

I hope you find this article valuable!

Stay curious; keep coding!