PDF de programación - TypeScript para Principiantes

TypeScript

para Principiantes

- 1 -

Table of Contents
TypeScript..................................................................................................................................................1
para Principiantes.......................................................................................................................................1
Comenzando con TypeScript.....................................................................................................................4
Instalando las herramientas...................................................................................................................4
Hola Mundo en TypeScript...................................................................................................................5
Anotaciones de tipo...............................................................................................................................7
Interfaces...............................................................................................................................................9
Expresiones de Función Flecha...........................................................................................................11
Clases con Modificadores de Accesibilidad Public y Private.............................................................13
Recursos de TypeScript.......................................................................................................................18
Estamos Solamente Empezando..........................................................................................................19
TypeScript para Principiantes, Parte 1: Comenzando..............................................................................20
¿Por Qué Aprender TypeScript?..........................................................................................................20
Instalación...........................................................................................................................................21
IDEs y Editores de Texto Con Soporte TypeScript.............................................................................21
Compilando TypeScript a JavaScript..................................................................................................22
Ideas Finales........................................................................................................................................24
TypeScript para Principiantes, Parte 2: Tipos Básicos de Datos..............................................................26
El tipo de datos Null............................................................................................................................26
El Tipo de Datos Indefinido................................................................................................................27
El Tipo de Datos Void..........................................................................................................................27
El Tipo de Datos Boolean....................................................................................................................28
El Tipo de Datos Numérico.................................................................................................................28
El Tipo de Datos String.......................................................................................................................29
Los tipos de datos Array y Tuple.........................................................................................................31
El Tipo de Datos Enum.......................................................................................................................32
Los tipos Any y Never.........................................................................................................................33
Pensamientos Finales..........................................................................................................................33
TypeScript Para Principiantes, Parte 3: Interfaces...................................................................................35
Creando Nuestra Primera Interfaz.......................................................................................................35
Haciendo la Propiedades de la Interfaz Opcionales............................................................................37
Utilizando el Indice de Firmas............................................................................................................38
Propiedades de Sólo Lectura...............................................................................................................39
Funciones e Interfaces.........................................................................................................................40
Reflexiones Finales.............................................................................................................................41
TypeScript Para Principiantes, Parte 4: Clases........................................................................................42
Creando tu primera clase.....................................................................................................................42
Modificadores privados y públicos.....................................................................................................43
Herencia en TypeScript.......................................................................................................................44
Usando el Modificador Protegido.......................................................................................................46
Pensamientos finales...........................................................................................................................47
TypeScript para Principiantes, Parte 5: Genéricos..................................................................................48
La Necesidad de Genéricos.................................................................................................................48
Usando Genéricos Podría Parecer Muy Limitante..............................................................................50
Crea Funciones Genéricas Usando Restricciones...............................................................................52

- 2 -

Ideas Finales........................................................................................................................................53

- 3 -

Comenzando con TypeScript

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:

1.Instalar el Gestor de Paquetes de Node (npm)

$ curl http://npmjs.org/install.sh | sh
$ npm --version
1.1.70

2.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

- 4 -

3.Cualquier navegador moderno: en este tutorial se usará Chrome.
4.Cualquier editor de texto: en este tutorial se usará Sublime Text.
5.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.

- 5 -

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 :

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:

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 manten