KISS your TypeScript Code!
Published: 2020-09-04 03:13:00

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
```javascript
let accepted = false;

```
A que refiere *accepted*, mejor seria asi:

```javascript
let userAccepted = false;

```
## Tip #02: Nombra los elementos que puedas pronunciar.

```javascript
class Invoice {
     gtAmnt() {...}
     gtTx() {...}
}
```
No, no hagan esto por favor, me lloran los ojos a leer esto así tiene mas sentido.

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

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

```javascript
class Invoice {
     getInvoiceAmount() {...}
     getInvoiceTax() {...}
}
```
Esto no es necesario por que al momento de crear instancias se vería algo asi:

```javascript
let invoce = new Invoice():

invoive.getInvoiceAmount();

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

```javascript
let invoce = new Invoice():

let invoiceAmount = invoive.getAmount();

```

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

```javascript
class Invoice {
     setItem (code: string, quantity: number, cost: number, tax: number)
     getInvoiceAmount() {...}
     getInvoiceTax() {...}
}
```
Así queda mejor:

```javascript

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:

```javascript
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.

```javascript
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:

```javascript
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:
 
```javascript
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.