domingo, 28 de febrero de 2016

Intro TypeScript - Open Close Principle

Hoy haré una pequeña prueba de concepto para ver como funciona un poco por encima TypeScript. Me dispongo a implementar el clásico ejemplo de calculador de áreas aplicando Open Close Principle de SOLID. Me parece un buen ejemplo para ver como usar mecanismos OOP en TypeScript.

TypeScript es un lenguaje open source creado sobre el 2012 y mantenido por Microsoft. Es un lenguaje basado en javascript que permite trabajar con clases y usar mecanismos OOP que no disponemos en javascript. El código TypeScript no se compila sino que se transpila, es decir, el compilador de TypeScript se encarga de traducir el código a javascript. Existen otras opciones como EcmaScript 6 o CoffeScript, similares que no entro a comparar porque tendría trabajo solo decir que si usas Visual Studio como IDE para desarrollar javascript seguramente la mejor opción es TypeScript por esto:



En la página oficial de TypeScript podemos encontrar ejemplos y el handbook que va bien para echar un vistazo a que se puede hacer.

En primer lugar comentar que para la prueba de concepto he usado Visual Studio 2015 en un aplicación cordova, en realidad no voy a pasarla a ningún dispositivo móvil simplemente he optado por este tipo de proyecto para la prueba de concepto porque la plantilla ya te lo da todo OOB para empezar a jugar con TypeScript. Destacar que se integra perfectamente con el IDE Visual Studio.

El ejemplo que voy a implementar lo he basado en este post de CodeProject donde está explicado como aplicar el principio en C#.

En primer lugar crearé una interface, IShape con un método Area():
module AreaCalculator {
    "use strict";

    export interface IShape {
        Area();
    }
}
Como veis he creado un module, ya que nos aislará del contexto global y de paso nos permitirá separar las clases, interfaces y demás que componen el servicio en diferentes archivos lo cual facilita el mantenimiento y trabajo equipo. Ahora que tenemos la interface, crearemos 2 formas que la implementen... un circulo y un cuadrado:
module AreaCalculator {
    "use strict";    

    export class Circle implements IShape {
        protected radius: number;

        constructor(radius: number) {
            this.radius = radius;
        }

        Area() {
            return this.radius * Math.PI;
        }
    }
}
module AreaCalculator {
    "use strict";

    export class Square implements IShape {
        protected Height: number;

        constructor(Height: number) {
            this.Height = Height;
        }

        Area() {
            return this.Height * this.Height;
        }
    }
}
Ahora que tenemos las formas ya podemos implementar el calculador de área.
module AreaCalculator{
    "use strict";

    export class Calculator implements IShape {
        protected shapes: Array;

        constructor() {
            this.shapes = new Array();
        }

        AddShape(shape: IShape) {
            this.shapes.push(shape);
        }

        Area() {
            var area: number = 0;
            this.shapes.forEach(function (shape) {
                area += shape.Area();
            });

            return area;
        }
    }
}
Por último edito el fichero root/scripts/index.ts, que es el punto de entrada de la aplicación. Tenemos que añadir este fragmento de código a la función window.onload:
//Area Calculator
var calc = new AreaCalculator.Calculator();
calc.AddShape(new AreaCalculator.Circle(10));
calc.AddShape(new AreaCalculator.Square(20));
alert(calc.Area());
Esto me muestra un mensaje con el resultado de la suma del área de las dos formas que hemos añadido. Si nos creásemos una tercera forma como podría ser un triangulo no sería necesario modificar AreaCalculator, simplemente tendríamos que hacer que implemente IShape y ya podríamos sumar su area a la del resto de formas.

Hasta aquí el artículo de hoy, si no conocías TypeScript ahora ya tienes alguna noción. Recuerda que puedes seguir areaTIC en las redes sociales y cualquier comentario siempre es bienvenido. Hasta la próxima!

No hay comentarios:

Publicar un comentario