This content originally appeared on DEV Community and was authored by DEV Community
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 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: luizcalaca@gmail.com
Instagram: https://www.instagram.com/luizcalaca
Linkedin: https://www.linkedin.com/in/luizcalaca/
Twitter: https://twitter.com/luizcalaca
This content originally appeared on DEV Community and was authored by DEV Community
DEV Community | Sciencx (2022-03-05T01:33:28+00:00) All about Interfaces using OOP in Typescript. Retrieved from https://www.scien.cx/2022/03/05/all-about-interfaces-using-oop-in-typescript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.