TypeScript – Empezando

Vamos a empezar construyendo una aplicación simple con TypeScript

Instalar TypeScritp

TypeScript se puede instalar de dos maneras:

  1. Vía npm (el manejador de paquetes de Node.js)
  2. Instalarlo en Visual Studio como un Plugin

Visual Studio 2015 y Visual Studio 2013 Update 2 incluyen TypeScript por defecto. Si tienes Visual Studio y no tienes TipeScritp, siempre lo puedes instalar desde este enlace.

Para usuarios de npm, la instalación se realiza con el siguiente comando:

npm install -g typescript

Construyendo nuestro primer fichero TypeScript

En tu editor preferido, escribe las siguientes lineas de código JavaScript en un fichero con nombre greeter.ts:

function greeter(person) {
return "Hello, " + person;
}
var user = "Jane User";
document.body.innerHTML = greeter(user);

Compilando nuestro código

Desde la consola (símbolo del sistema / cmd.exe), debemos situarnos en la ruta de la carpeta donde se encuentre el fichero con extensión .ts y ejecutamos el siguiente comando para correr el compilador TypeScript:

tsc greeter.ts

El resultado será un fichero greeter.js que contendrá el código JavaScript equivalente al código TypeScript que habíamos escrito.

Este fichero JavaScript resultante, es el que incluiremos en nuestro proyecto, ya que los navegadores (Chrome, Firefox, iExplorer, etc..) saben interpretar el código JavaScript pero no saben interpretar el código TypeScript.

Ahora, vamos a ver las ventajas que ofrece TypeScript con respecto a JavaScript. Para empezar, vamos a agregar un tipo : string al algumento person de la función greeter(), tal y como se muestra a continuación:

function greeter(person: string) {
return "Hello, " + person;
}
var user = "Jane User";
document.body.innerHTML = greeter(user);

Tipos

Cuando se dice que TypeScript es fuertemente tipificado, es porque podemos definir el tipo de las variables y funciones, como es el caso de la función anterior. En nuestro ejemplo, una vez definido el tipo, no podemos pasar un tipo distinto al definido ya que nos daría un error. Esto nos permite tener un mayor control del código.

Vamos a intentar pasar un Array por parámetro a nuestra función (que está esperando un String):

function greeter(person: string) {
return "Hello, " + person;
}
var user = [0, 1, 2];
document.body.innerHTML = greeter(user);

Al recompilar, se nos muestra un error:

Fuente: https://www.typescriptlang.org/docs/tutorial.html

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.