PDF de programación - Introducción a Typescript

Introducción a Typescript

Introducción a Typescript

0. Índice de contenidos.

•1. Introducción
•2. Sintaxis
•3. Comunicación con código Javascript ya existente
•4. Compilador Typescript, Grunt y Gulp.
•5. Revisando el código generado
•6. Conclusiones

1. Introducción
Desarrollar aplicaciones en Javascript puede convertirse en todo un desafío una vez que empieza a crecer tanto
la aplicación como el equipo, originalmente se pensó como un lenguaje para hacer efectos sencillos en la
páginas estáticas, y estamos intentándolo usar para hacer aplicaciones mucho más complejas de lo que se
pensó originalmente posible.

Aunque Javascript está avanzando a pasos agigantados, la compatibilidad con navegadores antiguos es
todavía un problema, por ello la gente de Microsoft creó Typescript, un lenguaje Open Source basado en
Javascript y que se integra perfectamente con otro código Javascript, solucionando algunos de los principales
problemas que tiene Javascript:

•Falta de tipado fuerte y estático.
•Falta de “Syntactic Sugar” para la creación de clases
•Falta de interfaces (aumenta el acoplamiento ya que obliga a programar hacia la implementación)
•Módulos (parcialmente resuelto con require.js, aunque está lejos de ser perfecto)

Typescript es un lenguaje con una sintaxis bastante parecida a la de C# y Java, por lo que hace fácil para los
desarrolladores con experiencia en estos lenguajes el aprender Typescript.

Otra ventaja del tipado estático es que habilita a otras herramientas a mejorar el soporte y la detección de
errores sin necesidad de arrancar el código, además de servir cómo documentación al programador.

2. Sintaxis
Tipos básicos
Los tipos básicos que maneja Typescript son booleans, number, string, Any y Void.

var isDone: boolean = false;
var height: number = 6;
var name: string = "bob";
var list:number[] = [1, 2, 3];
var notSure: any = 4;
function warnUser(): void {
alert("This is my warning message");
}

Los cuatro primeros tipos no hace falta explicarlos ya que cualquier desarrollador estará bastante familiarizado
con ellos, el 5º tipo Any es un tipo dinámico, se utiliza principalmente cuando no queremos declarar el tipo o
cuando estamos declarando el tipo de una librería de terceros, también se usa en arrays que contienen distintos
tipos.

Por último, void se utiliza principalmente para declarar el tipo de funciones que no devuelven nada, cómo en el
ejemplo de arriba.
Clases e interfaces

interface Animal {
name : string;
makeSound();
}


class Dog implements Animal {
constructor(name:string) {
this.name = name;
}

name:string;

makeSound() {
return "guau!";
}
}

function sayHi(animal:Animal) {
console.log("hi " + animal.name);
}

sayHi(new Dog("Timmy"))

Esto, como es de esperar devolverá hi Timmy por consola.

Modulos

Este quizás sea uno de los puntos más necesarios a la hora de conseguir una mejor arquitectura en las
aplicaciones Javascript.

Typescript lo resuelve usando una sintaxis parecida a la que veremos en Javascript cuando el estándar ES6 se
implemente en los navegadores. Typescript tiene dos tipos de módulos internos y externos, a continuación
vamos a explicar los externos, ya que queremos que se puedan usar en todos los navegadores ( para ello los
compila en módulos de Require )

Vamos a repartir una clase / interfaz por fchero, de manera que podamos tener el código bien organizado,
basándonos en el ejemplo anterior:

models/Animal.ts models/Dog.ts Main.ts

//models/Animal.ts
interface Animal {
name : string;
makeSound();
}

export = Animal

Podemos ver la keyword export que permite que otros módulos/clases utilicen la interfaz Animal.

// models/Dog.ts
import Animal = require('Animal')

class Dog implements Animal {
constructor(name:string) {
this.name = name;
}

name:string;

makeSound() {
return "guau!";
}
}

export = Dog

En este ejemplo se ven dos keywords nuevas, import y require, tras el import nombramos a la variable que
vamos a tener disponible en el resto del fchero y con require nombramos el modulo que queremos importar.
Por último, para usar estos módulos en nuestro fchero Main.ts:

import Dog = require('models/Dog')
import Animal = require('models/Animal')

function sayHi(animal:Animal) {
console.log("hi " + animal.name);
}

sayHi(new Dog("Timmy"))

y el resultado: hi Timmy.
Puedes ver todos los fcheros en Github

Genéricos

Los genéricos son muy útiles para hacer código mas reusable, uno de los claros ejemplos son las listas/Arrays,
en el siguiente extracto podemos observar como podemos defnir el tipo del Array.

var animals:Array<Animal> = [new Dog('Timmy'), new Dog('Michael'), new Dog('Dwight')];
animals.forEach(sayHi);

Esto puede ayudar sobre todo a hacer librerías y piezas de código más reutilizables.

3. Comunicación con código Javascript ya existente
Otra de las ventajas que otorga Typescript es que permite comunicarse con código Javascript ya creado e
incluso añadirle “tipos” a través de unos fcheros d.ts que indican los tipos que reciben y devuelven las
funciones de una librería por ejemplo.

Hay una estupenda comunidad con defniciones para algunas de las librerías más usadas, como pueden ser
Underscore, jQuery o Backbone.

Con solo descargarse la defnición y añadir una linea de texto en nuestro fchero, nos proporciona tipado para
aquellas librerías que no han sido escritas en Typescript.

/// <reference path="../libs/underscore.d.ts" />

Aquí podemos ver como IntelliJ es capaz de decirnos que tipo espera cada función.

En caso de que usáramos una librería interna o que no tenga declaración de tipos podemos hacerla nosotros,
según fuésemos necesitando las distintas funciones.

declare var _: {
each<T, U>(arr: T[], f: (elem: T) => U): U[];
delay(f: Function, wait: number, ...arguments: any[]): number;
template(template: string): (model: any) => string;
bindAll(object: any, ...methodNames: string[]): void;
};

Si por lo que fuera necesitáramos acceder desde Javascript al código generado por Typescript es muy sencillo,
ya que el código generado es fácilmente legible como podremos comprobar a continuación.

4. Compilador Typescript, Grunt y Gulp.
Para que funcione todo esto hace falta un paso intermedio para convertir el código Typescript en código
Javascript, para ello existen varios métodos.

Compilador Typescript

El equipo de Typescript provee una herramienta de linea de comandos para hacer esta compilación, se
encuentra en npm y se puede instalar con el siguiente comando:

<code>npm install -g typescript</code>

Podemos usarlo escribiendo

<code>tsc helloworld.ts</code>

Si queremos compilar varios fcheros, y que los módulos sean con notación AMD, podríamos hacerlo:

<code>tsc foo.ts bar.ts --module amd</code>

Esto no escala, ya que poner todos los fcheros uno a uno en la consola, puede resultar muy incomodo, por ello
podemos usar Typescript con herramientas como Grunt o Gulp, a continuación voy a poner un ejemplo de como
montar la build con Gulp.

Compilando con Gulp

Gulp es un TaskRunner parecido a Grunt (y Maven para los que vengan del mundo Java, sin la parte de
dependencias).

La idea es que se ejecute automáticamente el compilador Typescript cada vez que modifquemos un fchero, y
se recargue el navegador con los fcheros Javascript generados.

(A partir de aquí tenemos en cuenta de que tienes instalado Gulp en tu ordenador, puedes leer cómo aquí)

gulp.task('compile:typescript', function () {
gulp.src('app/src/**/*.ts')
.pipe(ts({
declarationFiles: true,
noExternalResolve: true,
module: 'amd'
}))
.pipe(gulp.dest('dist/scripts'))
});

Esto lo que hará será compilar todos los fcheros con la extension .ts con las opciones que le pasemos en el
objeto json dentro de ts() y los pondrá en dist.
Esta tarea ha de ser invocada manualmente, el siguiente paso será crear una tarea que detecte los cambios en
los fcheros con extension .ts y ejecute automáticamente dicha tarea, para ello usaremos la función watch de
gulp.

gulp.task('default', function () {
gulp.watch('app/src/**/*.ts', ['compile:typescript'])
});

Por último vamos a crear una tarea que nos cree un servidor local donde probar nuestra aplicación, y que cada
vez que cambiemos algún fchero se recargue el navegador.

// Watch Files For Changes & Reload
gulp.task('serve', ['compile:typescript'], function () {
browserSync({
notify: false,
server: ['dist', 'app']
});
gulp.watch(['app/**/*.html'], reload);
gulp.watch(['app/src/**/*.ts'], ['compile:typescript', reload])
});

Puedes ver el fchero entero con todos las dependencias aquí.

5. Revisando el código generado
Por último, vamos a comprobar el código que ha generado el compilador de Typescript, el siguiente código es el
que ha generado para el fchero main.js

Cómo se puede observar es código fácilmente legible, y podría ser fácilmente generado por un humano, esto es
una de las principales ventajas de Typescript respecto a otros lenguajes que compilan a Javascript.

También podemos observar como se compilan las clases:

define(["require", "exports"], function (require, exports) {
var Dog = (function () {
function Dog(name) {
this.name = name;
}
Dog.prototype.makeSound = function () {
return "guau!";
};
return Dog;
})();
return Dog;
});

Como podemos ver no se hace ningún tipo de mención a la interfaz Animal y esto es debido a que la
comprobación de que cumpla la interfaz se hace en tiempo de compilación y no en tiempo de ejecución, por lo
que no incurrimos en ningún tipo de penalización.

6. Conclusiones
Como hemos podido ver Typescript añade algunas cosas interesantes que echamos de menos en Javascript
que ayudaran a mejorar el código y a aumentar la mantenibilidad en proyectos grandes.

También hemos podido observar que el código generado no es “mágico” por lo que no debería difcultar el
debugging o la recolección de trazas. Además de que el tipado puede ayudarnos m