Domina fácilmente TypeScript

Hace unos días se presentó TypeScript y hemos podido leer varias cosas sobre este nuevo lenguaje creado por Microsoft que pretende integrarse en nuestros editores e IDEs de forma fácil.

Principalmente se caracteriza por implementar las ventajas de un lenguaje orientado a objetos y las ventajas de JavaScript, permitiéndonos usar ambos a la vez (podríamos escribir la mitad en JavaScript y la otra en el lenguaje propio de TypeScript) y por supuesto el código que tuviésemos de JavaScript no se verá alterado, por lo que no hará falta modificar ninguna libreria.

Implementarlo

Podemos usar TypeScript de varias formas muy sencillas:

• Instalar en Node.js: para instalarlo solo debemos de introducir el siguiente comando para instalar la extensión npm install -g typescript y posteriormente para compilarlo usaremos tsc [Nombre del archivo].ts.

• Usar las herramientas en Visual Studio 2012: Microsoft nos da la opción de usar el editor con herramientas especificas dandonos un plugin que podemos descargar en la página oficial de TypeScript.

• Usar las herramientas en Sublime Text, Emacs y Vim: no se han olvidado de las personas que no usen o prefieran no usar Virtual Studio, y nos dan la opción de instalar el plugin en nuestro editor favorito.

• Editor online: en la web oficial de TypeScript también podemos encontrar un editor y compilador instantáneo que funciona a la perfección.

Primeros pasos

Una de las cosas básicas que nos permite TypeScript es establecer el tipo de variable fácilmente.
Este es un ejemplo muy básico, en el que no tiene demasiada importancia declarar el tipo de variable, pero el revisor te avisaría si introduces un tipo de dato erróneo.

function informacion(ciudad:string, habitantes:number){
    return "Hay " + habitantes + " habitantes en " + ciudad;
}
alert(informacion('Madrid',100000));

En este caso el compilador nos devuelve lo siguiente:

function informacion(ciudad, habitantes) {
    return "Hay " + habitantes + " habitantes en " + ciudad;
}
alert(informacion('Madrid', 100000));

Declarar el tipo de variable en funciones propias de JavaScript no es especialmente necesario, pero teniendo en cuenta que este lenguaje está orientado a códigos de gran escala nos puede ayudar a no cometer errores.

El uso de “interface”

Cuando pasamos una variable a una función (nombre_funcion(variable)) podemos declarar su tipo (string, number, any…) pero cuando pasamos por esa variable un objeto podemos declarar el tipo de cada una de sus entradas mediante interface.

interface Persona {   // Declaramos el formato de los datos que pasan a Saludo(datos)
    Nombre: string;       // Como he comentado antes, hacer esto
    Apellido1: string;    // sirve para establecer el tipo de
    Apellido2: string;    // variable y poder evitar errores
}
function Saludo(datos : Persona) {     // Establecemos el formato de "datos" con :Persona
    return "Hola, " + datos.Nombre + " " + datos.Apellido1;
}
var user = {Nombre: "Carlos", Apellido1: "Ruiz", Apellido2: "Sánchez"};    // Este es el objeto que pasaremos a la función
alert(Saludo(user))    // Llamamos a Saludo() y pasamos como variable "datos" el objeto "user"

En el editor de código nos marcaría como erróneo si en el objeto user ponemos en Nombre cualquier tipo de variable que no fuese string, es decir un número nos daría fallo.

Class y JavaScript

Desde el punto de vista de JavaScript, class nos genera un objeto que podemos preconfigurar con un subconjunto de funciones en su interior, lo que sería muy útil para crear APIs (ya que es el sistema que a menudo usan).

class hola { // Creamos la clase "hola"
    mipalabra:string;   // Establecemos la variable "mipalabra" que usaremos dentro de la clase
    constructor (palabra:string){
        this.mipalabra = palabra;   // Cuando llamemos a la clase estableceremos "mipalabra" con el argumento
    }
    saludar(adjetivo:string){
        return "Hola " + this.mipalabra + ' ' + adjetivo + "."; // Al ejecutar esta función se añadira al texto "mipalabra" y el "adjetivo"
    }
    despedir(adjetivo:string){
        return "Adiós " + this.mipalabra + ' ' + adjetivo + ".";    // Hace lo mismo que saludar
    }
}
var Saluda = new hola('Genbeta Dev');   // Generamos el objeto con las funciones.
alert(Saluda.despedir('triste'));   // Usamos la funcion con el "Hola"
alert(Saluda.saludar('feliz')); // Usamos la funcion con el "Adiós"

El resultado tras la compilación:

var hola = (function () {
    function hola(palabra) {
        this.mipalabra = palabra;
    }
    hola.prototype.saludar = function (adjetivo) {
        return "Hola " + this.mipalabra + ' ' + adjetivo + ".";
    };
    hola.prototype.despedir = function (adjetivo) {
        return "Adiós " + this.mipalabra + ' ' + adjetivo + ".";
    };
    return hola;
})();
var Saluda = new hola('Genbeta Dev');
alert(Saluda.despedir('triste'));
alert(Saluda.saludar('feliz'));

Comparando varios códigos podemos apreciar como traduce el compilador, convirtiendo class en una función, y las funciones que contiene las añade al objeto con prototype, lo que resulta bastante cómodo para hacer fácilmente un pequeño conjunto de instrucciones que no entorpezcan el uso del resto del código, ya que tenemos la libertad de establecer cual será la variable que contenga este objeto (var Saluda = new hola('Genbeta Dev');).

Conclusión

Probablemente para crear nuestros pequeños códigos para hacer cuatro cosillas en nuestra web no sería necesario usarlo, pero cuando estamos creando un proyecto donde existe gran cantidad de códigos JavaScript y varias librerías podría ayudarnos a encontrar el orden dentro del caos.

Más información | TypeScriptLang
Editor y compilador online | TypeScriptLang – Playground
En Genbeta Dev | TypeScript, un JavaScript supervitaminado y mineralizado cortesía de Microsoft