PDF de programación - Manual de TypeScript

Manual de TypeScript

http://desarrolloweb.com/manuales/manual-typescript.html

Página 1 de 33

Manual de TypeScript

Introducción: Manual de TypeScript

En este manual explicamos TypeScript, un lenguaje de programación que compila a Javascript.

TypeScript es lo que se conoce como un superset de Javascript, es Javascript con nuevas utilidades que lo
convierten en un lenguaje más completo. Entre otras muchas cosas, lo más particular de TypeScript es que
incluye tipos en el lenguaje Javascript, para convertirlo en un lenguaje fuertemente tipado o de tipado
estático.

En el Manual de TypeScript explicamos cómo usar TypeScript como lenguaje en cualquier proyecto y cuáles
son las novedades que presenta en relación a Jávascript, haciendo énfasis en las ventajas que nos ofrece el
aplicar el superset.

Para aprovechar el Manual de TypeScript deberías conocer Javascript previamente, a un nivel medio por lo
menos. De momento no tenemos como objetivo en hacer este manual un recorrido exhaustivo a todo lo
que ofrece TypeScript, sino centrarnos más bien en las principales utilidades y en los temas que necesitamos
conocer para poder usarlo en diversos entornos.

Uno de los entornos donde podrás sacarle partido es para resolver tus dudas en la programación con
Angular, ya que Angular 2 (y las versiones sucesivas) usan TypeScript como lenguaje.

Encuentras este manual online en:
http://desarrolloweb.com/manuales/manual-typescript.html

http://desarrolloweb.com/manuales/manual-typescript.html

Página 2 de 33

Manual de TypeScript

Autores del manual

Las siguientes personas han participado como autores escribiendo artículos de este manual.

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online
EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997,
transformando su hobby en su trabajo.

Jaime Peña Tresancos

Escritor. Colaborador habitual de revistas de tecnología y experto en nuevas
tecnologías y programas Microsoft

Enrique Fernandez Guerra

Desarrollador web Frontend, especializado en Javascript y TypeScript. Trabaja
actualmente en PlainConcepts. Colaborador de DesarrolloWeb es impulsor de
los #jsIO

http://desarrolloweb.com/manuales/manual-typescript.html

Página 3 de 33

Manual de TypeScript

Introducción a TypeScript

Qué es TypeScript y qué necesitamos para empezar a usar este lenguaje de programación que
compila a Javascript.

TypeScript es un lenguaje de programación de alto nivel que implementa muchos de los mecanismos más
habituales de la programación orientada a objetos, pudiendo extraer grandes beneficios que serán
especialmente deseables en aplicaciones grandes, capaces de escalar correctamente durante todo su tiempo
de mantenimiento.

La característica fundamental de TypeScript es que compila en Javascript nativo, por lo que se puede usar en
todo proyecto donde se esté usando Javascript. Dicho con otras palabras, cuando se usa TypeScript en
algún momento se realiza su compilación, convirtiendo su código a Javascript común. El navegador, o
cualquier otra plataforma donde se ejecuta Javascript, nunca llegará a enterarse que el código original estaba
escrito en TypeScript, porque lo único que llegará a ejecutar es el Javascript resultante de la compilación.

En resumen, TypeScript es lo que se conoce como un "superset" de Javascript, aportando herramientas
avanzadas para la programación que traen grandes beneficios a los proyectos.

Qué es un Superset

Es un lenguaje escrito encima de otro lenguaje o mejor dicho, que compila a otro lenguaje. En el caso de
TypeScript es un lenguaje que compila a JavaScript, pero que incluye muchas facilidades y ventajas.

Los lenguajes como JavaScript basados en un estándar evolucionan muchas veces más lento que las
necesidades de los desarrolladores. Entonces surgen empresas o comunidades que deciden expandir un
lenguaje, aportando todas las herramientas que se echan en falta para poder desarrollar con las mejores
condiciones.

Los superset compilan en el lenguaje estándar, por lo que el desarrollador programa en aquel lenguaje
expandido, pero luego su código es "transpilado" para transformarlo en el lenguaje estándar, capaz de ser
entendido en todas las plataformas.

http://desarrolloweb.com/manuales/manual-typescript.html

Página 4 de 33

Manual de TypeScript

Nota: En este artículo mencionamos que TypeScript compila a Javascript, pero quizás es más específico
decir que "transpila" a Javascript. Transpilar es un término relativamente nuevo, viene del inglés
"transpiler", fruto de la unión de las palabras "translate" y "compiler". Realmente es más correcto decir
que TypeScript (u otros superset) transpilan, puesto que lo cierto es que no hay una compilación, sino es
una traducción de un código fuente en otro código fuente en un lenguaje diferente.

Existen dos superset populares para Javascript. Por un lado tenemos CoffeeScript y por otro lado
TypeScript. La diferencia principal es que mientras que CoffeeScript te aleja del lenguaje, con TypeScript
escribes en un lenguaje que es muy similar al propio Javascript. Por ese motivo los programadores
interesados en usar un superset se han volcado principalmente a TypeScript.

De todos modos, existen personas a favor y en contra de los superset, por varios motivos. Pero en este caso
usar TypeScript no tiene una desventaja particular, ya que si queremos aprovechar las ventajas de Javascript
tendremos que decantarnos por el uso de ES6, lo que nos obligará a usar un transpilador como Babel. Al
final, desarrollar en TypeScript o en el propio JavaScript con ES6 hace muy poca diferencia en la práctica,
puesto que las dos alternativas te obligarán a usar un transpilador. En resumen, en el caso de usar ES6
necesitas de Babel, u otro transpilador, y en el caso programar en TypeScript usarás el propio transpilador
de TypeScript (sigue leyendo para mayores aclaraciones).

Por qué TypeScript

En concreto TypeScript nos ofrece muchas de las utilidades que se necesitan en JavaScript para poder
convertirlo en un lenguaje escalable, a la altura de las necesidades más exigentes. TypeScript nos ofrece
muchas de las cosas que los desarrolladores de lenguajes más tradicionales vienen usando en su día a día.

Una de las diferencias fundamentales es que TypeScript es verdaderamente orientado a objetos, trayendo
herramientas como la herencia, sobrecarga, etc. En resumen tiene cosas que suenan a lenguajes como Java,
C++, C#, etc. Otro ejemplo clave es el del tipado estático. En el caso de TypeScript este tipado estático es
opcional, pero obviamente su uso es muy recomendado y es una de las principales utilidades que nos van a
facilitar mucho el trabajo y la depuración de los programas.

Nota: TypeScript se parece a C#. Es un hecho. El motivo es que el propio creador del lenguaje, Anders
Hejlsberg, es ingeniero de Microsoft y actualmente arquitecto jefe de C#. El propio TypeScript nace con
el objetivo de aportar a Javascript las herramientas y ventajas en el desarrollo con las que están
acostumbrados desarrolladores de lenguajes más potentes como C# o Java.

Cuando trabajamos con TypeScript tenemos a nuestra disposición todas las herramientas de Javascript ES6
(EcmaScript 6) y muchas de las que encontraremos en la futura especificación ES7. Por lo tanto, usar
TypeScript te asegura que podrás adelantarte al futuro y empezar a usar las posibilidades de estos estándares
en el presente.

Además, TypeScript es la opción más natural de entrar en Angular 2, la nueva versión del más popular de
los frameworks JavaScript. Si trabajas o vas a trabajar con Angular 2 apreciarás dominar TypeScript, por
varios motivos que explicaremos. Entre ellos porque la mayor parte de la documentación la encontrarás con

http://desarrolloweb.com/manuales/manual-typescript.html

Página 5 de 33

Manual de TypeScript

este lenguaje y porque te ofrece las mejores herramientas para combinar con el estilo de desarrollo
promovido por Angular 2.

Qué necesitamos para usar TypeScript

Básicamente necesitamos descargar dos programas. El primero es NodeJS, no porque necesitemos
desarrollar con Node, sino porque el compilador de TypeScript está desarrollado en NodeJS.

Desde el sitio de NodeJS encontramos las opciones para la instalación en nuestro sistema operativo, por
medio de un típico instalador con su asistente (siguiente, siguiente…) Más información en el Manual de
NodeJS.

Luego necesitarás el TSC (Command-line TypeScript Compiler), la herramienta que nos permite compilar
un archivo TypeScript a Javascript nativo. Este software es el que está realizado con NodeJS y su instalación
se realiza vía npm con el siguiente comando:

npm install -g typescript

Cómo crear y compilar un archivo TypeScript

El archivo TypeScript lo creas con cualquier editor de texto para programadores, como habitualmente haces
con cualquier otro lenguaje. Solo que generalmente usarás la extensión ".ts".

Algo muy importante: Cualquier código Javascript compila en TypeScript. Esto quiere decir que el código
que tenemos en Javascript lo podemos usar también perfectamente dentro de Javascript. Por tanto, para
trabajar con TS podemos usar perfectamente los conocimientos que tenemos en Javascript, agregando
diversas ayudas que nos ofrece TypeScript.

Este sería un posible código TypeScript donde hemos colocado básicamente unos cuantas declaraciones de
tipos en variables. Además de una función que se ha declarado devuelve "void" (nada).

var a:number = 9;
a += 4;

function mostrar(b:string) :void{
console.log(b);
}
mostrar('hola');

Para compilarlo usarás el mencionado TSC y lanzarás un sencillo comando que convertirá el código a
Javascript nativo.

tsc ejemplo.ts

La herramienta TSC incluye además "watchers" que permiten vigilar cambios en los archivos TS,
compilando su código a JS en el instante sin que tengamos que intervenir. Además es habitual que el

http://desarrolloweb.com/manuales/manual-typescript.html

Página 6 de 33

Manual de TypeScript

compilador, s