Muchas personas me han consultado por el tutorial que hice hace unos años sobre TypeScript. Otros me han preguntado, que vienen trabajando con JavaScript, si vale la pena utilizar TypeScript y qué ventajas tenemos sobre el primero. Por esta razón, decidí crear esta pequeña guía para invitarlos a probar sus capacidades.
¿Qué es TypeScript?
Básicamente, es un lenguaje que nos brinda la posibilidad de tener un capa que extendiendo las funcionalidades de JavaScript como si fuera un lenguaje fuertemente tipado. Para dar un ejemplo, en javascript todas las variables son variables y podemos asignar lo que deseamos, pero muchas de las veces nos podemos encontrar con un error donde estamos dividiendo un número por un valor string. TypeScript puede evitar esto gracias a que cuando declaramos una variable podemos hacerlo como string y no nos permitirá almacenar un número en esa variable.
Debemos tener presente que nuestro navegador no puede interpretar TypeScript, esto hace que deba ser compilado y que el resultado final, después de todo, sea JavaScript. Aunque TS, desde ahora en adelante, no extiende funcionalidades de JS, en adelante, en tiempo de ejecución, pero si nos da un conjunto de herramientas para que como desarrolladores podamos escribir código con menor cantidad de errores.
Variables
En JS el tipo de variable se asigna dinámicamente, infiere el tipo por el valor que se le está asignando. En TS es obligatorio detallar qué tipo de variable es la que estamos declarando. Recordemos, en JS podemos primero asignarle un número y luego un valor, nunca tendremos un error.
En cambio, si usamos la declaración de TS, cuando intentamos asignar la variable, veremos un error. En mi caso uso Visual Studio Code, pueden ver el mensaje que nos retorna en pantalla en la siguiente imagen.
Aquí es donde TS hace la diferencia para nosotros, usar los tipos de datos no ayudará a reducir errores en nuestro código. JS nos da demasiada libertad en este sentido, y muchas veces, nos deja escribir código malo aunque no nos demos cuenta. Vamos a dar otro ejemplo, en JS, ¿que impide que se declare una variable y luego lo convierta en un objeto? Nada.
Vemos que la herramienta no muestra un error, pero si tendremos errores en tiempo de ejecución al querer acceder por ejemplo al valor y nos encontremos que nos retorna un objeto.
En TS es sencillo resolver este problema definiendo el tipo de variable durante la etapa de escritura de código para que solo puedan asignar valores de ese tipo.
Imaginemos que otro desarrollador quiere usar nuestra variable, ahora no solo él, si no todo el equipo de desarrollo puede confiar que el valor retorna exactamente. Ahora veamos un ejemplo más concreto:
La función espera un objeto producto, pero JS no tiene forma de garantizar que al ser invocado le envíen el tipo de valor que nosotros pensamos. En TS tenemos una forma de resolver este inconveniente por medio de Interfaces.
Muchos dirán, es mucho más código que escribir, pero realmente vale la pena evitar horas de depuración buscando el error. También, recordemos que hay muchas herramientas que nos ayudan a reducir este impacto, Visual Studio Code posee una gran cantidad de AddOn que nos facilitan el trabajo con TS. Ahora podemos observar que aseguramos que el tipo de variable enviado a la función sea del tipo que espera.
Tipos
Ahora que tenemos un poco más de idea como funciona TS, veamos que tipos de variables podemos declarar, enumeremos las más comunes:
En los últimos 2 sirven para revertir la capacidad de TS y que funcione como JS, no deberíamos usarlos, pero conociemiento el mundo de la programación mejor que estén, pero como siempre, nuestro objetivo es escribir código mejor formado reduciendo la cantidad de errores.
Antes vimos cómo podemos crear un tipo de dato personalizado. Esto se canaliza por medio de la interfaces. Estas nos permiten definir una estructura básica de un tipo nuevo que podemos utilizar en nuestra aplicación.
Vemos cómo declararlos nuevos objetos de nuestro tipo:
Pero esto no termina acá, este nuevo tipo demos utilizar en otros tipos personalizados:
Herencia
También tenemos disponible la herencia que no permite extender nuestras interfaces. Supongamos que tenemos 2 tipos: Profesores y Estudiantes. Ambos dos comparten algunas de sus propiedades o características podremos sacarlas a un tipo más general llamado Personas.
Tipo de datos retornado
Es posible también especificar en una función o método que tipo de dato retorna no solamente los tipo que debe recibir.
Generics
En TS podemos definir funciones genéricas que son muy utilizadas para procesar datos que sean de cualquier tipo pero de una misma forma.
Conversiones
Cuando extendemos nuestras interfaces estamos haciendo que un objeto es su base sea compatible con otro, aquí es donde entran las conversiones. sigamos con el ejemplo de las personas. Primero crearemos un objeto del tipo de Profesor y lo convertiremos en estudiante.
Conclusiones
Espero que les haya sido de ayuda para tener un mejor panorama de lo que es TS. Los invito a indagar un poco más en este lenguaje, les dejo la documentación oficial para que puedan consultarla aquí.
