DEV Community

Cover image for All about Interfaces using OOP in Typescript
Luiz Calaça
Luiz Calaça

Posted on

All about Interfaces using OOP in Typescript

#typescript #programming #beginners #tutorial

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 }
Enter fullscreen mode Exit fullscreen mode

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 }
Enter fullscreen mode Exit fullscreen mode

One interface can extends other:

interface IPerson<T> { id: T, name: string, age: number } interface IUser extends IPerson<number> { password: string }
Enter fullscreen mode Exit fullscreen mode

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" }
Enter fullscreen mode Exit fullscreen mode

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

interface IPerson<T> { id: T, name: string, age?: number }
Enter fullscreen mode Exit fullscreen mode

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 }
Enter fullscreen mode Exit fullscreen mode

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 } }
Enter fullscreen mode Exit fullscreen mode

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 } }
Enter fullscreen mode Exit fullscreen mode

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 } }
Enter fullscreen mode Exit fullscreen mode

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 + "!@#$%¨&*()" } }
Enter fullscreen mode Exit fullscreen mode

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: luizcalaca@gmail.com
Instagram: https://www.instagram.com/luizcalaca
Linkedin: https://www.linkedin.com/in/luizcalaca/
Twitter: https://twitter.com/luizcalaca

Top comments (0)