Interfaces in TypeScript

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.