TypeScript el siguiente paso

Ari Olvera 6/sep/21
Desarrollo

Después de utilizar JavaScript (en adelante JS) por más de un año, continuaba mi duda sobre si el siguiente paso era comenzar a aprender otro lenguaje como python o enfocarme en dominar lo más posible frameworks como React o Vue.js, al conocer que TypeScript (en adelante TS) fue desarrollado por Microsoft la imagen de Windows Vista apareció inmediatamente en mi mente y no sabía si en realidad era necesario aprenderlo.

Existen soluciones de Microsoft que son realmente una verdadera obra de arte como Visual Studio Code, que es el editor de texto por antonomasia que usamos la mayoría de los desarrolladores de software, así que era momento de quitarme ese prejuicio respecto a las tecnologías desarrolladas por esta joya tecnológica geoestratégica de occidente.


¿Qué es TypeScript y cómo funciona?


Es un “superset” de JS o dicho de otro modo, es un superconjunto que robustece y expande las funcionalidades del popular lenguaje de programación que todos conocemos. TS incluye entre muchas otras características, el tipado de variables, funciones, clases y nuevos tipos de datos que no existen en JS.

TS no se ejecuta directamente en el navegador, porque su sintaxis no sería entendida por el intérprete del navegador, sin embargo TS tiene incluido un compilador que traduce código TS a JS con el ECMAScript (en adelante ES) que necesites, por defecto en la actual versión 4.4 lo hace en ES5, pero esta característica es configurable.

El TypeScript Compiler (tsc) no es un compilador en sí porque no empaqueta el código en forma de un archivo binario, aunque TS lo llama compilador, el término correcto sería transpilador porque traduce el código TS a JS, con este funcionamiento la salida de archivos JS es completamente normal y entendible para cualquier navegador.


ts_js_web

Para configurar TS solo debes instalarlo de manera global con:


npm install -g typescript

Crear el archivo tsconfig.json:

tsc --init

Iniciar el TS Compiler en modo observador:

tsc -w


Eso es todo, al crear un archivo .ts en automático será creado un archivo con el mismo nombre pero con la extensión .js, además cada vez que guardes el archivo .ts, el archivo .js será actualizado.


ts_js_example

Por qué aprender TypeScript


Desde la creación de JS en 1995 por Brendan Eich, el objetivo de JS era ejecutar scripts en el navegador y la creación de NodeJS en 2009 por Ryan Dahl, hizo posible que JS pudiera ejecutarse en el servidor, convirtiendo a JS en el lenguaje predominante de la web, teniendo un solo lenguaje para desarrollar frontend y backend o como diría mi profesor de JS Alberto Casero de KeepCoding:


js_dominarlos_todos

Además cada año es actualizado con la nueva versión del estándar ECMAScript incorporando nuevas características, TS sigue el patrón de desarrollo del ES, por lo tanto va por detrás del lenguaje principal.


Si eres desarrollador JS, errores comunes cómo “cannot read property ‘value’ of null/undefined ... ” o simplemente los errores más terroríficos cuando la aplicación no se rompe pero no tienes ninguna advertencia en la consola o en la consola de desarrollo del navegador o tardar horas e incluso días en depurar la aplicación.


TS ayuda a robustecer JS de una manera sólida y profesional, además no es difícil, si ya sabes JS pasar a TS es relativamente fácil, uno de los puntos más importantes de TS es que ayuda a mejorar la legibilidad del código y el mantenimiento de aplicaciones gigantes.


También es buena práctica usarlo en tu desarrollo diario aunque estés haciendo tutoriales o creando apps pequeñas, porque como desarrolladores lo sabemos, es mejor no confiar en nuestra memoria, ¿cuantas veces te ha pasado? que al terminar de trabajar en un proyecto, conoces perfectamente que tipo y valor regresa cierta función o cual es el tipo de los argumentos que recibe una función para ejecutarse de manera exitosa, pero pasamos a otros proyectos y pasados algunos meses volvemos a leer el mismo código que desarrollamos y no recordamos que tenía que devolver cierta función.


En un inicio podrías pensar que no vale la pena escribir líneas adicionales de código para la aplicación, pero comparado con la legibilidad que le brinda a nuestro desarrollo, así como la facilidad para mantenerlo, es una inversión que te da un retorno muy por arriba del esfuerzo inicial que implica, casi como un retorno de una inversión bien hecha en criptos 😁.


Otra razón importante es que compañías grandes y estructuradas, TS se vuelve un requerimiento clave para los desarrolladores (además del testing, claro) porque al desarrollar software a gran escala, lo más importante además de que funcione bien, es que sea mantenible y escalable, contar con habilidad en TS te ayudará a encontrar mejores oportunidades laborales, así como abrirte las puertas de Angular que es el frontend framework de google, el cual para manejarlo necesitas desarrollar con TS, además recuerda que en React puedes incluir PropTypes, aunque me parece mucho más sencillo, legible y seguro utilizar TS creando archivos .tsx en React.

Fry_take_my_money

¿Por dónde empezar?


Te invito a escuchar el podcast de Fernando Herrera titulado DevTalles, Fernando es un creador de contenido sumamente talentoso, además su pedagogía en la forma de explicar, poner ejemplos y exigir ejercicios para que pongas en práctica lo aprendido en cada video, hace que sus cursos sean extremadamente útiles, además tiene un sentido del humor bastante peculiar.


También otro paso super recomendable o más bien obligatorio, es tomar el curso de TypeScript en Udemy, impartido por el mismo Fernando Herrera, siendo el curso de TS más y mejor calificado, totalmente recomendado, además de la documentación oficial que es mas cruda o difícil de leer en un inicio.