Open In App

Interfaces in TypeScript

Last Updated : 11 Mar, 2025
Summarize
Comments
Improve
Suggest changes
Like Article
Like
Share
Report
News Follow

TypeScript is a statically typed superset of JavaScript that adds optional types, classes, interfaces, and other features to help developers build robust and maintainable applications. One of the most powerful features of TypeScript is interfaces, which allow you to define the structure of objects, enforce consistency, and improve code readability.

What Are Interfaces?

An interface in TypeScript is a contract that defines the structure of an object. It specifies the properties and methods that an object must have, without providing any implementation. Interfaces are used solely for type-checking purposes and are removed during the compilation process.

Why Use Interfaces?

  • Defining object shapes: Ensuring objects have specific properties and methods.
  • Improving code readability: Making it clear what properties and methods an object should have.
  • Enforcing consistency: Preventing errors by ensuring objects adhere to a specific structure.

Here’s a simple example of how to use interfaces in TypeScript:

interface Car {
    make: string;
    model: string;
    year: number;
}
const myCar: Car = {
    make: "Toyota",
    model: "Corolla",
    year: 2022
};
console.log(myCar);
  • Car Interface: Defines the structure of the car object with make, model, and year as required properties.
  • myCar Object: An object that adheres to the Car interface with the specified properties.

Output:

{ 
make: 'Toyota',
model: 'Corolla',
year: 2022
}

More Example of Interfaces in TypeScript

Interface in a Class

interface Employee {
    name: string;
    age: number;
    position: string;
}

class Manager implements Employee {
    name: string;
    age: number;
    position: string;
    
    constructor(name: string, age: number, position: string) {
        this.name = name;
        this.age = age;
        this.position = position;
    }
}

const manager1 = new Manager("John Doe", 35, "Project Manager");

console.log(manager1);
  • The Employee interface defines the structure for an employee, requiring name, age, and position properties.
  • The Manager class implements the Employee interface, ensuring it has the required properties.

Output:

Manager { name: 'John Doe', age: 35, position: 'Project Manager' }

Interface for an Object

interface Product {
    id: number;
    name: string;
    price: number;
}

const product: Product = {
    id: 1,
    name: "Laptop",
    price: 1200
};

console.log(product);
  • The Product interface specifies that a product must have an id (number), name (string), and price (number).
  • The product object follows the Product interface and includes all required properties.

Output:

{ id: 1, name: 'Laptop', price: 1200 }

Interface with Method Signatures

interface Calculator {
    add(a: number, b: number): number;
    subtract(a: number, b: number): number;
}

class SimpleCalculator implements Calculator {
    add(a: number, b: number): number {
        return a + b;
    }
    
    subtract(a: number, b: number): number {
        return a - b;
    }
}

const calc = new SimpleCalculator();

console.log(calc.add(5, 3));
console.log(calc.subtract(9, 4));
  • The Calculator interface defines two methods add and subtract, both accepting two numbers and returning a number.
  • The SimpleCalculator class implements the Calculator interface, providing logic for the add and subtract methods.

Output:

8
5

Best Practices for Using Interfaces

  • Use Interfaces to Define Object Structures: Always use interfaces to define the structure of complex objects or data models in your code.
  • Use Optional Properties: If some properties might not always be present, make them optional to improve code flexibility.
  • Interface Inheritance: Take advantage of interface inheritance to build more complex structures from simpler ones.
  • Use Interfaces for Function Signatures: When defining complex functions, interfaces can help to clarify the function signature, making your code more maintainable.

Interfaces in TypeScript -FAQs

What is the purpose of an interface in TypeScript?

Interfaces define the structure of objects and enforce consistency by specifying which properties and methods an object must have.

Can interfaces in TypeScript have optional properties?

Yes, you can make properties optional by using the ? symbol.

Can a class implement multiple interfaces in TypeScript?

Yes, a class can implement multiple interfaces in TypeScript, allowing it to conform to several contracts.

How are interfaces different from types in TypeScript?

Both interfaces and types can define object shapes, but interfaces are more suited for defining object structures, while types are more flexible and can be used for union types, intersections, and more.

Can interfaces be extended in TypeScript?

Yes, interfaces can extend other interfaces, allowing you to build on existing structures.


Similar Reads

three90RightbarBannerImg