Comenzando con TypeScript

Spanish (Español) translation by Alberto Contreras (you can also view the original English article)

A finales de 2012, Microsoft introdujo TypeScript, un superconjunto tipado para JavaScript que compila en JavaScript plano. TypeScript se centra en proporcionar herramientas útiles para aplicaciones a gran escala implementando características, como clases, anotaciones de tipo, herencia, módulos y mocho más. En este tutorial, comenzaremos con TypeScript usando ejemplos de código pequeños, compilándolos en JavaScript y viendo el resultado de forma instantánea en el navegador.

Instalando las herramientas

Las características de TypeScript solamente se aplican en el momento de la compilación

Configurará su equipo de acuerdo con su plataforma y necesidades específicas. Los usuarios de Windows y Visual Studio simplemente deben descargar el Plugin de Visual Studio. Si utiliza Windows y no tiene Visual Studio, puede probar Visual Studio Express for Web. Actualmente, la experiencia de TypeScript en Visual estudio es superior a la de otros editores de código.

Si utiliza una plataforma diferente (o no desea usar Visual Studio), todo lo que se necesita para usar TypeScript es un editor de texto, un navegador y el paquete npm TypeScript. Siga las siguientes instrucciones:

Instalar el Gestor de Paquetes de Node (npm)

1
2	$ curl http://npmjs.org/install.sh \| sh
3	$ npm --version
4	1.1.70

Instalar el paquete npm TypeScript


		$ npm install -g typescript
		$ npm view typescript version
		npm http GET https://registry.npmjs.org/typescript
		npm http 304 https://registry.npmjs.org/typescript
		0.8.1-1

Cualquier navegador moderno: en este tutorial se usará Chrome.
Cualquier editor de texto: en este tutorial se usará Sublime Text.
Plugin para resaltado de sintaxis para editores de textos.

Eso es todo; ¡estamos listos para hacer una simple aplicación "Hola Mundo" ("Hello World") en TypeScript!

Hola Mundo en TypeScript

TypeScript es un superconjunto de Ecmascript 5 (ES5) e incorpora características propuestas para ES6. Debido a esto, cualquier programa JavaScript es ya un programa TypeScript. El compilador de TypeScript realiza transformaciones de ficheros locales en programas TypeScript. Por lo tanto, el resultado final JavaScript se asemeja bastante a la entrada en TypeScript.

En primer lugar, crearemos un fichero básico index.html con una referencia a un fichero de script externo.


<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Learning TypeScript</title>
</head>
<body>

	<script src="hello.js"></script>

</body>
</html>

Esta es una aplicación "Hola mundo" (Hello World) básica; así que, creemos un fichero llamado hello.ts. La extensión *.ts designa a un fichero TypeScript. Añada el siguiente código al fichero hello.ts:

1
2	alert('hello world in TypeScript!');

En siguiente lugar, abra la interfaz de línea de comandos, navegue a la carpeta que contiene el fichero hello.ts y ejecute el compilador de TypeScript con el siguiente comando:

1
2	tsc hello.ts

El comando tsc es el compilador TypeScript, este comando generará de forma inmediata un nuevo fichero llamado hello.js. Nuestra aplicación TypeScript no utiliza una sintaxis específica de TypeScript por lo que veremos exactamente el mismo código JavaScript en hello.js que en el fichero hello.ts que hemos escrito.

¡Genial! Ahora podemos explorar las características de TypeScript y ver cómo puede ayudarnos a mantener y crear aplicaciones JavaScript a gran escala.

Anotaciones de tipo

Las anotaciones de tipo son una característica opcional, la cual nos permite chequear y expresar nuestras intenciones en los programas que escribimos. Creemos una función simple area() en un nuevo fichero TypeScript, llamado type.ts.


function area(shape: string, width: number, height: number) {
	var area = width * height;
	return "I'm a " + shape + " with an area of " + area + " cm squared.";
}

document.body.innerHTML = area("rectangle", 30, 15);

Seguidamente, cambiemos el nombre del script usado en index.html a type.js y ejecutemos el compilador de TypeScript mediante tsc type.js. Refresque la página en el navegador y debería ver lo siguiente:

Como se muestra en el código anterior, las anotaciones de tipo se expresan como parte de los parámetros de la función; estos indican los tipos de los valores que se pueden pasar a la función. Por ejemplo, el parámetro shape está especificado como un valor de cadena y width y height son valores numéricos.

Las anotaciones de tipo, y otras características de TypeScript, se validan únicamente en el momento de la compilación. Si se pasa cualquier otro tipo de valor a estos parámetros, el compilador generará un error en tiempo de compilación. Este comportamiento es extremadamente útil cuando se construyen aplicaciones a gran escala. Por ejemplo, pasemos de forma intencionada un valor de cadena al parámetro width:


function area(shape: string, width: number, height: number) {
	var area = width * height;
	return "I'm a " + shape + " with an area of " + area + " cm squared.";
}

document.body.innerHTML = area("rectangle", "width", 15); // wrong width type

Sabemos que esto producirá un resultado no deseado, y al compilar el fichero se nos alertará del problema con el siguiente error:

1
2	$ tsc type.ts
3	type.ts(6,26): Supplied parameters do not match any signature of call target

Debemos tener en cuenta que, a pesar del error, el compilador genera el fichero type.js. El error no evita que el compilador de TypeScript genere el correspondiente fichero JavaScript, aunque el compilador nos avisa de los problemas potenciales. Teníamos la intención de que width fuese un número, pasando cualquier otro tipo produce un comportamiento no deseado en nuestro código. Otras anotaciones de tipo incluyen bool o incluso any.

Interfaces

Expandamos nuestro ejemplo para incluir una interfaz que más adelante describa el parámetro shape como un objeto con una propiedad color opcional. Creamos un nuevo fichero llamado interface.ts y modificamos la referencia al script en index.html para que incluya interface.js. Insertemos el siguiente código en interface.ts:


interface Shape {
	name: string;
	width: number;
	height: number;
	color?: string;
}

function area(shape : Shape) {
	var area = shape.width * shape.height;
	return "I'm " + shape.name + " with area " + area + " cm squared";
}

console.log( area( {name: "rectangle", width: 30, height: 15} ) );
console.log( area( {name: "square", width: 30, height: 30, color: "blue"} ) );

Las interfaces son nombres dados a tipos de objetos. No solamente podemos declarar una interfaz sino que también podemos usarla como anotación de tipo.

La compilación de interface.js no producirá errores. Para provocar un error, añadamos otra línea de código a interface.js usando un objeto shape que no tenga propiedad nombre y veamos el resultado en el navegador. Añadamos esta línea a interface.js:

1
2	console.log( area( {width: 30, height: 15} ) );

Ahora, compilemos el código con tsc interface.js. Recibirá un error, pero no se preocupe por eso ahora mismo. Refresque el navegador y observe la consola. Verá algo similar a la siguiente imagen:

Ahora miremos al error. Este es:

1
2	interface.ts(26,13): Supplied parameters do not match any signature of call target:
3	Could not apply type 'Shape' to argument 1, which is of type '{ width: number; height: number; }'

Vemos este error debido a que el objeto pasado a area() no se corresponde con la interfaz Shape; necesita tener la propiedad name para que así sea.

Expresiones de Función Flecha

Entender el ámbito de la palabra this puede ser complejo y TypeScript lo hace un poco más fácil al soportar las expresiones de función flecha, una nueva característica que está siendo discutida para ECMAScript 6. Las funciones flecha preservan el valor de this, haciendo mucho más fácil de escribir y usar funciones de devolución de llamada o callback. Considere el siguiente código:


var shape = {
	name: "rectangle",
	popup: function() {

		console.log('This inside popup(): ' + this.name);

		setTimeout(function() {
			console.log('This inside setTimeout(): ' + this.name);
			console.log("I'm a " + this.name + "!");
		}, 3000);

	}
};

shape.popup();

El valor de this.name en la línea nueve estará claramente vacío, como se demuestra en la consola del navegador:

Podemos solucionar este problema fácilmente usando una función flecha de TypeScript. Simplemente debemos sustituir function() por () =>.


var shape = {
	name: "rectangle",
	popup: function() {

		console.log('This inside popup(): ' + this.name);

		setTimeout( () => {
			console.log('This inside setTimeout(): ' + this.name);
			console.log("I'm a " + this.name + "!");
		}, 3000);

	}
};

shape.popup();

Y el resultado será:

Echemos un vistazo al fichero JavaScript generado. Veremos que el compilador a inyectado una nueva variable, var _this = this;, y la usa en la función de devolución de llamada de setTimeout() para hacer referencia a la propiedad name.

Clases con Modificadores de Accesibilidad Public y Private

TypeScript soporta clases y su implementación está cerca de la propuesta en ECMAScript 6. Creemos otro fichero llamado class.ts y repasemos la sintaxis de las clases:


class Shape {

	area: number;
	color: string;

	constructor ( name: string, width: number, height: number ) {
		this.area = width * height;
		this.color = "pink";
	};

	shoutout() {
		return "I'm " + this.color + " " + this.name +  " with an area of " + this.area + " cm squared.";
	}
}

var square = new Shape("square", 30, 30);

console.log( square.shoutout() );
console.log( 'Area of Shape: ' + square.area );
console.log( 'Name of Shape: ' + square.name );
console.log( 'Color of Shape: ' + square.color );
console.log( 'Width of Shape: ' + square.width );
console.log( 'Height of Shape: ' + square.height );

La clase Shape, arriba definida, tiene dos propiedades, area y color, un constructor (acertadamente llamado constructor()), así como un método shoutout(). El ámbito de los argumentos del constructor (name, width y height) es local al constructor. Este es el motivo por el cual veremos errores en el navegador, así como en el compilador:


class.ts(12,42): The property 'name' does not exist on value of type 'Shape'
class.ts(20,40): The property 'name' does not exist on value of type 'Shape'
class.ts(22,41): The property 'width' does not exist on value of type 'Shape'
class.ts(23,42): The property 'height' does not exist on value of type 'Shape'

Cualquier programa JavaScript es ya un programa TypeScript.

Seguidamente, exploremos los modificadores de accesibilidad public y private. A los miembros públicos se puede acceder desde cualquier parte, mientras que a los miembros privados solamente se puede acceder dentro del ámbito de la clase. No hay, por supuesto, ninguna característica en JavaScript que valide la privacidad, por lo tanto la accesibilidad privada solamente se puede validar en el momento de la compilación y nos servirá como una advertencia a la intención original del desarrollador de hacerla privada.

Como ilustración, añadamos el modificador de accesibilidad public al argumento del constructor name, y el modificador de accesibilidad private a color. Cuando añadimos public o private a un argumento del constructor ese argumento, automáticamente, se convierte en un miembro de la clase con el modificador de accesibilidad relevante.


...
private color: string;
...
constructor ( public name: string, width: number, height: number ) {
...

1
2	class.ts(24,41): The property 'color' does not exist on value of type 'Shape'

Herencia

Finalmente, podemos extender una clase existente y crear una clase derivada de ella con la palabra clave extends. Agreguemos el siguiente código al fichero class.ts existente, y compilémoslo:


class Shape3D extends Shape {

	volume: number;

	constructor ( public name: string, width: number, height: number, length: number ) {
		super( name, width, height );
		this.volume = length * this.area;
	};

	shoutout() {
		return "I'm " + this.name +  " with a volume of " + this.volume + " cm cube.";
	}

	superShout() {
		return super.shoutout();
	}
}

var cube = new Shape3D("cube", 30, 30, 30);
console.log( cube.shoutout() );
console.log( cube.superShout() );

Unas cuantas cosas están ocurriendo con la clase derivada Shape3D:

Debido a que es derivada de la clase Shape, esta clase hereda las propiedades area y color.
Dentro del método constructor, le método super llama al constructor de la clase base, Shape, pasándole los valores de name, width y height. La herencia nos permite reutilizar código de Shape, por lo que podemos fácilmente calcular this.volume con la propiedad heredada area.
El método shoutout() sobrescribe la la implementación de la clase base y un nuevo método, superShout(), llama directamente al método shoutout() de la clase base usando la palabra clave super.

Con solamente unas pocas líneas adicionales de código, podemos extender fácilmente la clase base para añadir una funcionalidad específica y dar a conocer nuestra intención por medio de TypeScript.

Recursos de TypeScript

A pesar de que TypeScript tiene una edad extremadamente joven, se pueden encontrar muchos grandes recursos sobre el lenguaje en la web (¡incluyendo un curso completo que vendrá a Tuts+ Premium!) Asegúrese the mirar estos:

Sitio web principal
Tutoriales y ejemplos
Editor de código en vivo con salida JavaScript
Repositorio de código para discusiones y seguimiento de errores
¿Qué es TypeScript? por el equipo de desarrollo
Lista de documentación para TypeScript

Estamos Solamente Empezando

TypeScript soporta clases, y su implementación está cerca de la propuesta en ECMAScript 6.

Probar TyperScript es fácil. Si te divierte una aproximación más estáticamente tipada a aplicaciones grandes, entonces las características de TypeScript validarán un ambiente familiar y disciplinado. Aunque ha sido comparado con CoffeeScript o Dart, TypeScript es diferente ya que no reemplaza JavaScript; este añade características a JavaScript.

Tenemos todavía que ver como evoluciona TypeScript, pero Microsoft ha indicado que continuarán manteniendo sus muchas características (anotaciones de tipo aparte) alineadas con ECMAScript 6. Así que, si le gustaría probar muchas de las nuevas características de ES6, ¡TypeScript es una excelente forma de hacerlo! Adelante - ¡Dele una oportunidad!