DEV Community

Cover image for Interfaces in Typescript with an Example
Dany Paredes
Dany Paredes

Posted on • Edited on

3

Interfaces in Typescript with an Example

The interface is a great Typescript feature and helps to write clearly structured and explicit code.

The interface helps you to describe a structure like fields without values or methods without implementation and also to force objects, class to have.

Interface as Type

The interfaces are created with interface keyword and contain the blueprint of an object, for example, Subscription, contained properties and methods.

And also allow mark as optional properties or methods adding a question mark after the method name or property.

interface Subscription {
    readonly: id;
    url?: string;
    name: string;
    sign() ?: string;
}
Enter fullscreen mode Exit fullscreen mode

Using the interface as a type.

let  subscriptionFrench : Subscription = {
    id: 1
    name: 'Paris',
    sign(): string {
        return "Bonjour"¨;
    }
}
Enter fullscreen mode Exit fullscreen mode

Implement interfaces in classes

The interface also helps to force your classes or your objects to have a structure and to clearly describe how an object should look like.

Using implement keyword after the class name and the name of the interface the class will implement the interface and must have every field defined into the interface.

Also, the class can implement more than one interface, separate by commas it an advance over normal inherits.

The IDE and compiler will raise an error if it doesn't fit with the interface.

interface NetflixPremium  {
  allMovies: number;
}
class Spain implements NetflixPremium, Subscription {
    price: Number = 10.99;
    allMovies: number = 100;
    constructor(public name: string) {

    }
    sign(): void {
        console.log(`Thanks for signup ${this.name}.`)
    }
}

let spainSubscriptions = new Array<Spain>();
let bcn = new Spain("bcn");
let madrid = new Spain("madrid");

spainSubscriptions.push(bcn);
spainSubscriptions.push(madrid);

spainSubscriptions.forEach(element => {
    element.sign();
});

Enter fullscreen mode Exit fullscreen mode

Extends interfaces

A better way to implement multiples interfaces in a single class is by extending interfaces using the extends keyword and the name of the interface to be extended.

interface NetflixPremium extends Subscription {
  allMovies: number;
}
Enter fullscreen mode Exit fullscreen mode

The interface NetflixPremium contains every related to Subscription and the class Spain only needs to implement a single interface.

class Spain implements NetflixPremium {
    price: Number = 10.99;

    constructor(public name: string) {

    }
    sign(): void {
        console.log(`Thanks for signup ${this.name}.`)
    }
    allMovies: number = 100;

}
Enter fullscreen mode Exit fullscreen mode

That's it!

Hopefully, that will give you a bit of help with interface in Typescript. If you enjoyed this post, share it.

Photo by Cytonn Photography on Unsplash

Billboard image

Synthetic monitoring. Built for developers.

Join Vercel, Render, and thousands of other teams that trust Checkly to streamline monitor creation and configuration with Monitoring as Code.

Start Monitoring

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay