All about Interfaces using OOP in Typescript

Hi, Devs!

When we are talking about OOP (Oriented Object Programming) one interesting and necessary topic is Interfaces. When to use? That's a design decision. How to manipulate? So, let's observe some cases and uses in Typescript language.

All the things declared in Interface has a public visibility and will be implemented into a class.

First of all, one example of its simple use:

interface IPerson {
   id: number,
   name: string,
   age: number
}

Perhaps, in some cases we can use Generics for typing a specific atribute in the implemented class:

interface IPerson<T> {
   id: T,
   name: string,
   age: number
}

One interface can extends other:

interface IPerson<T> {
   id: T,
   name: string,
   age: number
}

interface IUser extends IPerson<number> {
  password: string
}

We can use an Interface to typing an object:

interface IProduct {
   id: number,
   description: string,
}

let product: IProduct = {
  id: 1,
  description: "That's a computer"
}

Some attributes you can leave it optionally using "?" before ":", like this (age?:) below.

interface IPerson<T> {
   id: T,
   name: string,
   age?: number
}

It means that the Class will not require it in a mandatory way. We can take methods too:

interface IPerson<T> {
   id: T,
   name: string,
   age: number,
   getId(): T
}

And let's implements the above example:

interface IPerson<T> {
   id: T,
   name: string,
   age: number,
   getId(): T
}

class Person implements IPerson<number> {
    id: number;
    name: string;
    age: number;

    constructor(){
        this.id = 0
        this.name = ""
        this.age = 0
    }

    getId(): number {
        return this.id
    }
}

If you need to do private our protected attributes, you need to adjust your syntax code, because the default visibility in interface is public. So, it's necessary to write the "_" before the attribute:

class Person implements Person<number> {
    private _id: number;
    private _name: string;
    private _age: number;

    constructor(){
        this._id = 0
        this._name = ""
        this._age = 0
    }

    set id(id: number){
        this._id = id
    }

    set name(name: string){
        this._name = name
    }

    set age(age: number){
        this._age = age
    }

    getId(): number {
        return this._id
    }
}

If you don't implement the set methods you get the error:

Class 'Person' incorrectly implements interface 'Person'. Type 'Person' is missing the following properties from type 'Person': id, name, age

One Class can implement multiple interfaces:

interface IPerson<T> {
   id: T,
   name: string,
   age: number,
   getId(): T
}

interface IUser {
    username: string,
    password: string
}

class Person implements IPerson<number>, IUser{
    id: number;
    name: string;
    age: number;
    username: string;
    password: string;

    constructor(){
        this.id = 0
        this.name = ""
        this.age = 0
        this.username = ""
        this.password = ""
    }

    getId(): number {
        return this.id
    }

}

A abstract class can implement multiple interfaces:

interface IPerson<T> {
   id: T,
   name: string,
   age: number,
   getId(): T
}

interface IUser {
    username: string,
    password: string
}

abstract class Person implements IPerson<number>, IUser{
    id: number;
    name: string;
    age: number;
    username: string;
    password: string;

    constructor(){
        this.id = 0
        this.name = ""
        this.age = 0
        this.username = ""
        this.password = ""
    }

    getId(): number {
        return this.id
    }

    abstract generatePassword():string

}

class User extends Person {
    generatePassword(): string {
        return Math.random().toFixed + "!@#$%¨&*()"
    }

}

For Type or Interface discussion see here:
https://dev.to/luizcalaca/how-to-use-in-typescript-type-or-interface-47jk

So, That's all folks!

Contacts
Email: [e-mail]
Instagram: https://www.instagram.com/luizcalaca
Linkedin: https://www.linkedin.com/in/luizcalaca/
Twitter: https://twitter.com/luizcalaca