Introducción

TypeScript

Jesús Rodríguez – Desarrollador Aplicaciones

INDICE
1. Características faltantes de JavaScript
2. ¿Qué problemas suceden en JavaScript?
3. TypeScript
4. Plantilla/Template Literales TypeScript
5. Funciones: Parámetros opcionales, obligatorios y por
defecto
6. Funciones de flecha
7. Desestructuración de Objetos y Arreglos
8. Promesas
9. Interfaces
10. Introducción a las de la POO
11. Definición de una clase básica en TypeScript
12. Importaciones * URL
13. Decoradores de clases
14. Tipado del retorno de una función

Jesús Rodríguez – Desarrollador Aplicaciones

JAVASCRIPT CARECE DE MUCHAS COSAS
CARACTERÍSTICAS FALTANTES DE JAVASCRIPT
1. Tipos de variables.

JavaScript maneja todo tipo de variables númericos, string, etc, pero no hay
manera de saber que tipo de dato contiene una variable hasta que se le asigna
el valor.

2. Errores en tiempo de escritura/compilación.

No se puede detectar errores en tiempo de compilación/escritura ya que no lo
tiene a pesar de ser una herramienta muy útil.

3. Auto completación dependiendo de la variable.

Auto completación incompleta, debido a que según que variable sea tiene auto
completación o no.

4. Método estático de programación.

5. Clases y módulos (antes de ES6).
6. Hay IDE en los que se puede manejar JavaScript, como por
ejemplo NetBeans, eclipse, WS, etc, pero lo ideal sería un IDE
especializado en JavaScript que nos indicará el control total
indicando que un objeto tiene X propiedades o una clase x objetos
y formado por x métodos, etc.

¿Qué problemas suceden en JavaScript?

- Errores porque una variable no estaba definida.
- Errores porque el objeto no tiene la propiedad esperada.
- Errores porque no se tiene idea de como se trabajan las funciones de otros
compañeros.
- Errores porque se sobre escriben variables, clases, funciones o constantes…
- Errores porque el código colisiona con el de otro.

Jesús Rodríguez – Desarrollador Aplicaciones

 - Errores porque el cache del navegador mantiene los archivos de JavaScript
viejos.
- Errores porque colocamos una mayúscula o minúscula en el lugar incorrecto.
- Errores porque simplemente no sabemos como funciona el código de los demás.
- Errores porque el IDE no me dijo que eso no podía o debía hacerlo.

¡Lo peor de todos estos errores, es que no podemos detectarlos hasta que
ejecutamos el proyecto!

TypeScript
Es un super set de JavaScript, para comprender dicha magnitud centrémonos en lo
siguiente

ES → Es lo que conocemos como JavaScript (Declaración de variables, funciones,

métodos, etc).

ES6, ES7 → Incorporó funciones de flechas, promesas, un nuevo tipo de declaración

de variables, etc.

TypeScript (Creado por Microsoft) → TypeScript engloba todo lo anterior, y

además le añade funcionalidades, métodos, propiedad, formas estáticas de
programación, etc. Aunque hay algunas propiedades de ES6 que aún no son soportadas
por TypeScript, por ejemplo:

- Maps y Set.

A continuación, podemos ver unos ejemplos que diferencian TypeScript de JavaScript:

Jesús Rodríguez – Desarrollador Aplicaciones

 1. Declaración de variables

Como podemos ver hemos declarado una variable de tipo String, por lo que si
intentamos insertar un valor numérico posteriormente nos va a dar un error.

Sin embargo, si codificamos en JavaScript esto no pasa.

Aún así, TypeScript nos dirá que hay un error, pero nos dejará continuar, la
manera correcta de declarar una variable de tipo string u otro tipo, es indicándole que
tipo es como podemos ver a continuación:

Jesús Rodríguez – Desarrollador Aplicaciones

PLANTILLAS/TEMPLATE LITERALES TYPESCRIPT
El siguiente código es totalmente válido, pero si que nos podemos dar cuenta de que
nos alarga mucho el código y aumenta en cantidad de líneas:

Por lo tanto, una manera correcta es utilizar un template literal que podemos ver a
continuación:

Jesús Rodríguez – Desarrollador Aplicaciones

Si queremos realizar una multilínea, podemos realizarlo de la siguiente manera:

Podemos ver que el espacio que hemos dejado se contempla. Simplemente lo que
realiza es una multilínea equivalente a “\n”.
También se puede llamada a funciones que devuelven un resultado para asignarlas a
una variable, como podemos ver a continuación:
Para ello utilizamos el template cuando llamamos a la función getNombre().

Jesús Rodríguez – Desarrollador Aplicaciones

FUNCIONES: PARÁMETROS OPCIONALES, OBLIGATORIOS Y POR
DEFECTO
Un parámetro obligatorio en una función es aquel, que cuando se llama a dicha función
debe ser enviado en la llamada, en caso de no enviarlo, entonces no se podría trabajar
con dicha llamada. Además, el parámetro o parámetros obligatorios que deban enviarse,
deben corresponder con el tipo de variable que recibe dicha función.

Parámetro por defecto, este parámetro cogerá el valor por defecto asignado en caso de
no enviar ningún dato en la llamada de la función.

Parámetro opcional, este parámetro se puede enviar o no, pero debemos tener en
cuenta, que si queremos enviarlo, en la siguiente imagen tenemos un parámetro por
defecto, si queremos informar el opcional, también debemos informar el por defecto,
ya que si solo enviamos 2 parámetros nada más y se nos olvida el por defecto, entonces
el valor por defecto tomará el valor de la variable día que queríamos enviar.
Jesús Rodríguez – Desarrollador Aplicaciones
Por ley, no podemos poner el valor opcional al principio y el valor obligatorio al final. Por
lo tanto, como buenas prácticas:
- Debemos siempre indicar los valores obligatorios al principio, y los opcionales al
final.

FUNCIONES DE FLECHA
Ejemplo función simple de flecha:

Ejemplo función de flecha con dos parámetros:

Jesús Rodríguez – Desarrollador Aplicaciones

Ejemplo función flecha con más de una línea de código:

Ejemplo función flecha con objetos:

Este código es una función normal:

Como podemos ver, no tiene ninguna complicación ni parece que pueda causar
problemas, pero si a la función le realizamos un setTimeout, pasa lo siguiente:
- Esto es debido a que cuando se setea un setTimeout dentro de un objeto, el this
dentro del setTimeout apunta al objeto y en este caso es Windows debido a que
transcurrido ese tiempo ya ha salido de dicha función.

Jesús Rodríguez – Desarrollador Aplicaciones

 - Podemos ver el siguiente ejemplo, vamos a declarar un nombre como variable
global y veremos qué pasa.

Jesús Rodríguez – Desarrollador Aplicaciones

Todo esto lo solucionamos utilizando la función de flecha, como podemos ver a
continuación:

Jesús Rodríguez – Desarrollador Aplicaciones

Desestructuración de Objetos y Arreglos
Cuando instanciamos un objeto, normalmente para acceder a sus propiedades debemos
realizar la siguiente sentencia objeto.propiedad, en este punto es dónde interviene la
desestructuración de objetos, ya que nos facilita poder obtener la propiedad de un objeto sin
necesidad de realizar objeto.propiedad, simplemente con poner el nombre de la propiedad
estamos accediendo a la propiedad de dicho objeto. A continuación veremos un ejemplo:

En este tipo de desestructuración, no importa el orden en el que indiquemos las propiedades

que queremos obtener siempre y cuando sea un objeto, es decir, podemos realizar la siguiente
sentencia:

const { apellido2, nombre} = persona; Como vemos estamos obteniendo dos propiedades del
objeto persona y en ningún momento está siguiendo el orden en que están definidas.

Este tipo de desestructuración también funciona en los argumentos de una función, como
podemos ver a continuación:

Jesús Rodríguez – Desarrollador Aplicaciones

También podemos extraer las propiedades del argumento que se envié a una función de la
siguiente manera:

La desestructuración de arreglos/arrays sigue la misma filosofía que se ha explicado

anteriormente, pero tiene algunas peculiaridades que a continuación se van a definir.

- Cuando declaramos la variable que realizará la función de desestructuración de

arreglos/arrays no se define con { } como hemos realizado anteriormente con las
propiedades del objeto si no que se utiliza [ ].
- En este caso, el orden que indiquemos sí que debe ser el correcto, es decir, debe llevar
el mismo orden que el array, pero la definición de la propiedad no debe ser la misma.

Procedemos a ver un ejemplo:

Como podemos ver persona1 apunta a Jesús, persona2 a Juanma y persona3 a Pepe, esto
corresponde con el punto 3, es decir, lleva el orden del array/arreglo definido pero la
nomenclatura de las propiedades desestructuradas no coincide con la propiedad definida en el
arreglo/array, pero si podemos ver que el orden que sigue es exactamente igual que el del
array, es decir, si declaramos la constante de desestructuración de la siguiente manera:

Const [ persona2, persona1, persona3 ] = personas;

Persona2 apuntará a Jesús, persona1 a Juanma y persona3 a Pepe.

En el caso de solo querer desestructurar una propiedad del array o arreglo, se realiza de la
siguiente manera:

Jesús Rodríguez – Desarrollador Aplicaciones

También se puede realizar desestructuración de arreglos/array en los argumentos de una
función como se ha realizado anteriormente con los objetos, a continuación, dejo un ejemplo:

Promesas
Las promesas nos sirven para ejecutar un código sin bloquear el código de nuestra aplicación,
algunas de las características de una promesa son las siguientes:

- Dentro de la promesa se necesita una función que recibe 2 argumentos

o Resolve: Es lo que nosotros vamos a devolver o llamar cuando todo se
completa correctamente.
o Reject: Es lo que nosotros vamos a devolver o llamar si ocurre algún error.
- Se suelen utilizar cuando se requiere realizar una llamada a un servicio web.
o Si todo va correcto se llama o devuelve resolve.
o Si ocurre algún error se llama o devuelve reject.

A continuación, os dejo un ejemplo sencillo:

Cuando se realiza la llamada a una promesa podemos observar dos cosas:

Symbol es como un identificador.

Then → es lo que queremos ejecutar cuando todo ha ido correcto.

Catch → es lo que queremos ejecutar cuando ha surgido algún error.

Jesús Rodríguez – Desarrollador Aplicaciones

Cuando ejecutamos el código el resultado es el siguiente:

Como podemos ver, lo primero que se muestra es Inicio y Fin, pero la promesa se ha definido
antes del Fin esto ocurre debido a que como el código de la promesa no es bloqueante se sigue
ejecutando el resto del código y 1 segundo después que es lo definido en la promesa, se muestra
el resultado de la misma.

Qué pasaría si ejecutamos el código y en vez de devolver resolve devolvemos reject. A

continuación, un ejemplo:

Jesús Rodríguez – Desarrollador Aplicaciones

Como vemos nos devuelve un error, esto sucede debido a que no estamos controlando los
errores, lo correcto sería tratarlos con el catch. Por lo tanto, lo correcto sería lo siguiente:

- Algo a tener en cuenta es en vez de mostrar un console.log mostrar un conselo.warn de

esta manera es más fácil de identificar a la hora de hacer debug.

Cuando ejecutamos, el mensaje ya si aparece correctamente y no como un error por no haber

capturado la excepción:

A continuación, veremos un ejemplo más complejo:

Realizamos una función que devuelve una promesa, por lo tanto, cuando llamamos a dicha
función, en la llamada debemos realizar el tratamiento de una promesa, ya que es lo que
devuelve la función, lo vamos a ver a continuación en un ejemplo:

Jesús Rodríguez – Desarrollador Aplicaciones

Es muy importante definir el tipo de retorno para no tratar con objetos no conocidos o
denominados unknown, para ello realizamos el tipado, en la siguiente imagen podemos ver que
la promesa nos define que no sabe qué tipo es lo que devuelve.

Para definir que tipo va a devolver la función, que en este caso es una promesa, se especifica
después de los argumentos que recibe la función, el tipo que se define es aquel que devuelve
en caso de que todo vaya correcto, ya que si sucede algún error pues devuelve un error, a
continuación, se muestra un ejemplo:

Si ponemos otro tipado y es incorrecto al tipo que devuelve nos lo mostrará con un error:

Jesús Rodríguez – Desarrollador Aplicaciones

Interfaces

Este trozo de código devuelve la siguiente respuesta:

Esto está ocurriendo debido a que el objeto que estamos enviando la propiedad ‘nombre’ que
se obtiene en la función enviarCarta no corresponde con la propiedad del objeto debido a que
es nombrePersona1.

La solución a esto es realizar un tipado, es decir, en vez de definir que el tipo que nos llega es
any, definimos el tipo que vamos a recibir en este caso sería del objeto persona el nombre de
tipo string, a continuación, veremos un ejemplo:

Jesús Rodríguez – Desarrollador Aplicaciones

Lo definido en la función indica, que vamos a enviar un objeto, que al menos lleva una propiedad
denominada ‘nombre’ y que es de tipo string.

Pero esto anterior, también puede provocar ciertos problemas a futuro.

Es posible que necesitemos crear una función que se denomine devolverCarta, y en vez de la
variable ser nombre debemos cambiarla por nombrePersona, entonces nos supondría cambiarlo
en demasiados lados, como podemos ver a continuación:

Jesús Rodríguez – Desarrollador Aplicaciones

Para resolver este problema, debemos utilizar interfaces:

Una interfaz es algo parecido a una clase, pero no exactamente lo mismo.

- A una interfaz podemos definir que es lo que va a hacer.

- Una interfaz no tiene constructores.
- Únicamente contiene las reglas que debe cumplir un objeto para poder utilizarlo como
un tipo, es decir, es parecido a crearse un tipo de dato.
- Son únicamente para typeScript, es decir, cuando abramos nuestro fichero .js no van a
aparecer dichas interfaces.

El signo de ? en la propiedad dni indica que puede ser opcional, como vemos el objeto persona1
tiene un tipado a la interfaz Persona, y cada parámetro que se recibe en las funciones cuyo
tipado es persona, está regla es muy útil, debido a que si el día de mañana en la interfaz Persona
se añade alguna propiedad más que sea obligatorio en todos los objetos cuyo tipado sea Persona
nos indicará que falta dicha propiedad. Además, si alguna propiedad como puede ser nombre
cambia a ser nombrePersona, nos indicará que debemos cambiarlo en todo el resto de código
de nombre a nombrePersona dónde se utilizando. Esto nos sirve para tener más cerrado el
código y evitar utilizar propiedades genéricas.

Jesús Rodríguez – Desarrollador Aplicaciones

Introducción a las clases de POO
Una clase es una abstracción de un objeto de la vida real, es decir, algo que existe en la vida real.

Por ejemplo, un coche tienes sus propiedades, como puede ser:

- Número de puertas
- Color
- Marca
- Modelo
- Fabricante

Con un coche se en la vida cotidiana se puede realizar una serie de funciones como puede ser
arrancar, apagar, aparcar, conducir, etc.

Las funciones anteriores que se puede realizar con un coche en la vida cotidiana en POO son
conocidos como métodos.

También podemos encontrar la herencia, la herencia consiste en tener varias clases y una de
ella es la herencia, el resto de clases son heredadas del padre (La clase herencia). Es decir, las
clases hijas (Las que heredan de la clase padre, que es la clase herencia) contienen todos los
métodos y propiedades de la clase que heredan.

Podemos verlo con un ejemplo:

Figura Cuadrado Triángulo

Lados Lados Lados

Área Área Área

Como podemos ver la clase Figura, tiene dos propiedades (lados y área), y la clase Cuadrado y
Triángulo están formadas por dos propiedades también que son las mismas que podemos
encontrar en la clase Figura. Entonces aquí es donde debería intervenir la herencia, debido a
que la clase Cuadrado y Triángulo podrían heredar de la clase Figura y contener las propiedades
de la clase Figura.

Definición de una clase básica en TypeScript

Tenemos que tener en cuenta que para poder crear una clase en el fichero tsconfig en la
propiedad target debemos tener es6.

Lo primero que tenemos que saber, que para la creación de una clase debemos inicializarla con
la palabra reservada class, además se debe seguir la conocida nomenclatura camello, Ejemplo
PersonasDiscapacitadas. No obstante, a continuación, podemos ver un ejemplo de la creación
de una clase en TypeScript.

Jesús Rodríguez – Desarrollador Aplicaciones

En esta imagen, podemos ver la creación de una clase que está formada por un constructor por
defecto.

En esta imagen, podemos ver la creación de una clase que está formada por un constructor
parametrizable. Además, también podemos ver un ejemplo de constructor que es
parametrizable y a la vez tiene datos inicializados por defecto (Método comentado).

Importaciones * URL
En el siguiente enlace podemos obtener un pack de inicio con typeScript, para la importación de
módulos en TypeScript hay que realizar una serie de configuraciones (Todas estas
configuraciones ya se encargan angular de realizarlas y no debemos nosotros hacerlas), por lo
que, si queremos realizar importaciones en TypeScript, solamente debemos descargarnos el
proyecto que hay en la siguiente URL, dónde ya está todo configurado para poder realizarlas sin
problema.

https://github.com/Klerith/webpack-starter-typescript

Jesús Rodríguez – Desarrollador Aplicaciones

Una vez que tenemos descargado el proyecto e importado en nuestro IDE, en mi caso Visual
Studio Code, debemos abrir la terminar y ejecutar el siguiente comando:

Esto lo que va realizar es crear el directorio de los módulos de node y reconstruirlo para dejar
todo el proyecto configurado con las dependencias necesarias para trabajar en él. Sí se ha
instalado correctamente nos aparecerá el paquete de node_modules cuando hagamos refresh
en el proyecto, en caso de no salir nos vamos al directorio ya que es posible que la carpeta esté
en estado oculto.

Para inicializar un proyecto que tiene dependencias npm y utiliza node debemos ejecutar el
siguiente comando:

Como podemos ver en la consola, el proyecto se ha levantado en el puerto: 8080

Por lo tanto, para poder visualizar el proyecto nos iremos al navegador y pondremos:
localhost:8080

Además, una de las ventajas es que cuando realizamos un cambio en el proyecto y guardamos,
se realiza un reload automático de la página y podemos ver los cambios al instante y en caliente.

A continuación, nos vamos a basar en las importaciones, para ello en la carpeta src, creamos lo
siguiente:

Jesús Rodríguez – Desarrollador Aplicaciones

La extensión .class es opcional, pero es más indicativo ya que así sabemos automáticamente que
este fichero se refiere a una clase.

Una vez que hemos creado la clase definimos las propiedades que queramos como hemos visto
anteriormente, si que vamos a tener una peculiaridad, y es que debemos añadir la palabra
reservada export antes de class, esto va a indicar que está clase va a ser poder utilizada en otros
ficheros.

Posteriormente, nos vamos a nuestro fichero index.ts y realizamos una importación de la clase
Persona, no deberíamos tener ningún problema ya que al haber hecho dicha clase export se va
a poder utilizar desde otros ficheros, para ello debemos añadir la siguiente línea al principio del
fichero dónde queremos importar la clase.

Decoradores de clases
Un decorador es algo que se le va a colocar antes de la declaración de la clase, a continuación,
podemos ver un ejemplo:

¡Muy importante! En el fichero tsconfig la propiedad experimentalDecorator debemos

descomentarla y ponerla con valor true. Si hemos realizado el cambio y no desaparece el error,
debemos primero reiniciar el npm start y volverlo a inicial, y en caso de no ir reiniciar Visual
Studio Code.

Jesús Rodríguez – Desarrollador Aplicaciones

Como podemos ver, cuando ejecutamos nuestro código:

Nos devuelve como resultado lo siguiente:

Por lo tanto, un decorador sirve para añadir funcionalidad a nuestra clase, es decir, al añadir el
decorador lo que estamos indicando es que está clase va a ser un servicio, todo esto angular lo
hará por defecto y de forma automática.

El decorador @imprimirConsolar, lo que indica es que la clase Persona va a tener todas las
funcionalidades que añadamos a imprimirConsola.

En los decoradores se pueden enviar parámetros u objetos.

Tipado del retorno de una función

Jesús Rodríguez – Desarrollador Aplicaciones