TypeScript Básico

POO

Objetos

Un objeto es una entidad que agrupa un estado y una funcionalidad relacionada.

Clases

Una clase es una plantilla genérica a partir de la cuál instanciamos los objetos. Dicho de otra manera, una clase es una abstracción en la que se define el comportamiento que va a tener el objeto.

Las clases en Typescript son muy similares a lo que nos ofrecen otros lenguajes de orientación a objetos tradicionales, esto nos ayudará a modularizar nuestro código y a simplificar el desarrollo.

Ejemplo

class Employee {
   // atributo accesible desde fuera de la clase.
   public name : string;

   // Atributos accesible desde clases que hereden de Employee.
   protected age: number;

   // Access only inside the Employee class.
   private mobile : string; 

   constructor(name:string, age: number,mobile: string){
       this.name = name;
       this.age = age;
       this.mobile = mobile;
   }

   getName(){
      return this.name;
   }

   setName(name: string){
      this.name = name;
   }

   getAge(){
      return this.age;
   }

   setAge(age: number){
      this.age = age;
   }

   getMobile(mobile: string){
      this.mobile = mobile;
   }
}

Métodos accesores (getters y setters)

Como sabemos, los métodos get y set, también conocidos como métodos accesores, son simples funciones que usamos en las clases para mostrar (get) o modificar (set) el valor de un atributo. Normalmente los escribimos como "get" o "set" seguido del nombre de la propiedad a la que queremos acceder.

getName()

En Typescript se puede hacer de esta forma o haciendo uso de las palabras reservadas get o set delante del nombre de la función.

Ejemplo

class Actor {
   private _name : string;
   constructor(_name:string){
       this._name = _name;
   }

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

   get name (){
       return this._name;
   }
}

let actor = new Actor('Haider Malik');
console.log(actor.name);

// set 
actor.name = 'Jane Doe';
console.log(actor.name);

Herencia

La herencia nos permite extender la funcionalidad nuestra clase herendando de una clase padre. La clase hija hereda todos los miembros de su clase base y puede sobreescribir todos aquellos métodos y/o propiedades públicos o protegidos.

Ejemplo

class Manager extends Employee {
   constructor(name: string, age: number, mobile: string){
       super(name,age,mobile);
       this.age = 24;
   }
}

let manager = new Manager(‘Jane’,23, ‘0343–23332233’);
console.log(manager.getName());
console.log(manager.getAge());

Clases abstractas

Este tipo de clases no pueden ser instanciadas ya que se usan para definir comportamientos independientemente de su concreción. Su implementación es similar a la de una clase normal con la diferencia que hay que anteponer el termino abstract antes de declararlas.

Ejemplo

abstract class Product {
    productName: string = "Default";
    price: number = 1000;
    abstract changeName(name: string): void;

    calcPrice(){
        return this.price;
    }
}
 
class Mobile extends Product {
    changeName(name: string): void {
        this.productName = name;
    }
}
 
let mobProduct = new Mobile();
console.log(mobProduct);
mobProduct.changeName("Super It Product");
console.log(mobProduct);

Interfaces

Las interfaces son abstracciones que definen el comportamiento de las clases que la implementan. Son muy prácticas ya que nos permiten decirle al compilador cual es el comportamiento que debe esperar del objeto que definamos. TypeScript no requiere que un objeto tenga exactamente la misma estructura definida por la interfaz. Para que se los considere válidos, los objetos pueden tener cualquier forma siempre que definan las funciones y propiedades requeridas por la interfaz que implementan.

Ejemplo

interface ICar{
    engine: string;
    color: string;

    brake: () => void;
}
 
class Car implements ICar {
    constructor (public engine: string, public color: string) {}
     
    function brake(){
        console.log("Frenando...")
    }
}

Decoradores

Los decoradores son un estándar propuesto en ECMAScript2016. En TypeScript podemos habilitarlos añadiendo a nuestro tsconfig.json la directiva "experimentalDecorators: true".

Ejemplo

{
    "compilerOptions": {
      "module": "commonjs",
      "target": "es2015",
      "removeComments": true,
      "experimentalDecorators": true,
      "outDir": "./build"
    },
    "include": ["src/**/*"]
}

Los decoradores son un mecanismo para modificar clases, métodos, propiedades e incluso parámetros de forma declarativa.