Interfaces in typescript is one of the most important concept that helps maintain clean, readable, and scalable code. But what exactly is an interface in typescript, why should you use it, and what happens if you don’t? Let’s dive in to understand it clearly, step by step, with practical examples.

What is an Interface in TypeScript?

An interface in TypeScript is a structure that defines the shape of an object. It is used to define the properties and methods that an object must have. Interfaces are a way to enforce certain rules on objects and classes, ensuring they conform to a specific structure, making the code predictable and reducing errors.

Interfaces don’t provide any implementation; they only describe the shape of the data. This is what allows TypeScript to catch errors early and ensure your code adheres to a certain contract.

Syntax:

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

In this example, the Person interface requires that any object of type Person must have:

1. A name of type string
2. An age of type number
3. A greet method with no return value

Why Should You Use Interfaces in Typescript?

Interfaces are useful because they:

1. Provide Structure and Consistency: An interface ensures that objects adhere to a particular structure. This is helpful in larger applications with complex data.
2. Improve Code Maintainability: By using interfaces, you can quickly spot when objects are missing properties or methods. It enforces consistency across your codebase, making it easier to maintain and extend.
3. Enable Better Type Checking: Interfaces provide a way for TypeScript to ensure that objects conform to the expected shape, reducing runtime errors and increasing developer confidence during the development process.
4. Help with Object-Oriented Design: If you’re building classes, interfaces allow you to define the “contract” for what the class should do, which can lead to better object-oriented design.
5. Enable Code Reusability: With interfaces, you can reuse object shapes across multiple objects or classes, making the code more modular and reducing repetition.

Example of Interface Usage:

Let’s say we are building an app that handles user data. Instead of using a loosely structured object, we define an interface to ensure every user object conforms to a certain structure.

interface User {
    username: string;
    email: string;
    login(): void;
}

class Admin implements User {
    username: string;
    email: string;

    constructor(username: string, email: string) {
        this.username = username;
        this.email = email;
    }

    login() {
        console.log(`${this.username} has logged in.`);
    }
}

const user = new Admin('JohnDoe', 'john@example.com');
user.someOtherMethod(); 

Here, we define the User interface and create an Admin class that implements it. This guarantees that any Admin object will have the username, email, and login method.

What Happens If You Don’t Use Interfaces in Typescript?

If you decide not to use interfaces, you could face the following issues:

1. Unpredictable Behavior: Without interfaces, the data structure becomes unregulated. You might accidentally introduce a property or method that wasn’t expected, causing bugs that are harder to trace.
2. Missed Type-Checking: TypeScript will not be able to enforce type safety on objects. This can result in passing the wrong kind of data or method, leading to runtime errors that could have been caught during development.
3. Reduced Code Readability: Without interfaces, it’s harder for other developers (or even yourself later on) to understand the structure of objects. Interfaces act as a clear contract for what is expected.
4. Less Maintainable Code: As your application grows, maintaining and extending code without interfaces can become a mess. It’s easy to forget what properties are required or accidentally introduce new properties that break existing functionality.

Example Without Interface:

class Admin {
    username: string;
    email: string;

    constructor(username: string, email: string) {
        this.username = username;
        this.email = email;
    }

    login() {
        console.log(`${this.username} has logged in.`);
    }
}

const user = new Admin('JohnDoe', 'john@example.com');
user.someOtherMethod();  

In this example, there’s no interface to define the structure of Admin. If someone later tries to call someOtherMethod() on Admin or forgets to implement a method, TypeScript won’t catch it in advance. You could get a runtime error instead of a compile-time error.

Conclusion

Interfaces in TypeScript are an essential tool for writing clean, predictable, and maintainable code. They allow you to define the structure of objects and ensure that they conform to a specific contract. By using interfaces, you improve type safety, reduce errors, and enhance the maintainability of your code. Without interfaces, you risk introducing bugs, confusion, and poor maintainability, making your project harder to manage as it grows.

In summary:

• Use Interfaces: For type safety, clarity, and maintainability.
• Don’t Use Interfaces: Risk unpredictable behavior, missed errors, and hard-to-maintain code.

So, next time you write code in TypeScript, consider using interfaces to enforce clear contracts and keep things running smoothly!

Also Read: Easy explanation of Interceptors in Angular