KISS your TypeScript Code!

Samuel Ospina — Fri, 04 Sep 2020 03:13:00 +0000

Cuando desarrollamos solemos olvidar lo que hicimos hace meses, semanas o mejor dicho lo que hicimos ayer =(...

En este articulo les mostrare los mejores Tips para que mejores tus habilidades como desarrollador organizando mejor tu código.

Los primero que debes saber, que es KISS, Keep It Simple as Possible, o manten las cosas simples como sea posible, no tienes que hacer que tu código, solo tu puedas entenderlo.

Desde mi punto de vista le diría: Keep S*** Stupid Simple o manten las M....a lo mas simple posible, para que otros puedan leer tu código y saber de que se trata evitando que tengas que documentar (Actividad que no nos gusta hacer).

Entonces Iniciemos

Tip #01: Nombra los elementos con significado claro.

Crear variables que tengan significado cognitivos y cuando lo leas de nuevo sepas de que se trata, ejemplo:

Variables

let accepted = false;

A que refiere accepted, mejor seria asi:

let userAccepted = false;

Tip #02: Nombra los elementos que puedas pronunciar.

class Invoice {
     gtAmnt() {...}
     gtTx() {...}
}

No, no hagan esto por favor, me lloran los ojos a leer esto así tiene mas sentido.

class Invoice {
     getAmount() {...}
     getTax() {...}
}

Tip #03: Nombra los elementos solo lo necesario, no repitas.

class Invoice {
     getInvoiceAmount() {...}
     getInvoiceTax() {...}
}

Esto no es necesario por que al momento de crear instancias se vería algo asi:

let invoce = new Invoice():

invoive.getInvoiceAmount();

Se ve algo redundante la palabra invoice, se ve mejor asi:

let invoce = new Invoice():

let invoiceAmount = invoive.getAmount();

Tip #03: Utiliza Interfaces para pasar información a componentes.

class Invoice {
     setItem (code: string, quantity: number, cost: number, tax: number)
     getInvoiceAmount() {...}
     getInvoiceTax() {...}
}

Así queda mejor:


interface IItem {
    code: string;
    quantity: number;
    cost: number;
    tax: number;
}

class Invoice {
     setItem (item: IItem ) {...}
     getInvoiceAmount() {...}
     getInvoiceTax() {...}
}

Tip #04: Utiliza set y get para trabajar con miembros de clases:

class Invoice {
     public tax: number = 0; 
     setItem (item: IItem ) {...}
     getAmount() {...}
     getTax() {...}
}

let invoce = new Invoice():

let taxInvoice = invoive.tax;

No es buena practica acceder al los miembros de clase de esta forma, la forma correcta es a través de métodos.

class Invoice {
     tax: number = 0; 
     setItem (item: IItem ) {...}
     getAmount() {...}
     getTax() {...}
}

let invoce = new Invoice();

let taxInvoice = invoive.getTax();

Tip #05: Mantén las funciones puras con una sola responsabilidad:

class Invoice {
     tax: number = 0; 
     quantity: number = 0;

     setItem (item: IItem ) {...}
     getAmount() {...}
     getTax() {
       this.quantity = this.quantity + 1;
       return tax; 
     }
}

El metodo getTax() esta alterando la variable quantity esta instrucción debe estar en otra función, de esta forma:

class Invoice {
     tax: number = 0; 
     quantity: number = 0;

     setItem (item: IItem ): void {...}
     getAmount() : number {...}

     getTax(): number {
       return tax; 
     }

     getQuantity (): number {
        this.quantity = this.quantity + 1;
        return this.quantity;   
     }
}

Con estos Tips puedes tener tu código simple y fácil de leer y entender y así pase tiempo de haber escrito tu código, te sea fácil recordar de que se trata.

DEV Community: Samuel Ospina