[Tutorial] TypeScript | Javascript – Parte 1

He notado que al ingresar un persona nueva a nuestro equipo y comienza a trabajar con Angular, React o Vue.js, sin haberlo tocado nunca, la inducción es bastante difícil. Me ha dado un buen resulta que antes de Angular u otras tecnologías similares, invertir tiempo en el aprendizaje de base, en este caso TypeScript, como se usa y cual es su filosofía.

Objetivo

El objetivo de esta publicación es tocar los temas: ¿Que es TypeScript?, ¿Como se usa TypeScript?, qué herramientas tenemos y ver un ejemplo de su uso. También trataremos sus beneficios y qué puntos debemos tener en cuenta para su uso.

Audiencia

Este documento está dirigido a personas que conocen muy poco o nada sobre el tema.o personas que desarrollan tareas de consultoría de desarrollo o que simplemente están interesados en leer e investigar sobre la tecnología alcanzada por esta publicación.

Desarrollo

¿Que es TypeScript?

TypeScript es uno de los lenguajes de programación más nuevos que han aparecido. Es de código abierto, desarrollado y mantenido por Microsoft. Microsoft lo denomina como SuperSet de javascript. ¿Que quiere decir esto? Básicamente busca extender las características de un lenguaje tipado a JavaScript y puede ser usado desde aplicaciones pequeñas o en aplicaciones muy grandes.

Esto no significa que los navegadores van a entender TypeScript , TypeScript lo que hace es convertir nuestro código, transpilarlo, a código javascript que el navegador va a ejecutar. Algo que la gente de TypeScript hizo fuerte hincapié es que cualquier codigo escrito en javascript debe funcionar en TypeScript. Si tenemos codigo ya escrito debe funcionar sin problemas.

Javascript está basado en las especificaciones de ECMA Script que actualmente se encuentra en la versión 6. Estas especificaciones se mueven mucho más rápido de que los desarrolladores puedan adquirir el conocimiento, o la velocidad con la cual podemos actualizar nuestras aplicaciones. Inclusive la implementación de los fabricantes en los navegadores, servidores o sistemas operativos.  Existe un GAP que podemos ver en la siguiente imágen:

A pesar de ser antiguar, el gap de implementación comparadas entre 2015 y 2016 existía, hoy existe y seguirá existiendo.

Aquí es donde TypeScript es un herramienta realmente poderosa debido a que el resultado final que es JavaScript puede transformarse en la versión de ECMA Script que deseemos. Esto aumentando la compatibilidad de nuestras aplicaciones y reduce el impacto de sus actualizaciones.

Al ser un lenguaje basado tipos y POO, si poseemos este conocimiento de cualquier otro lenguaje basado en estos principios como .Net C#, Java o PHP, TypeScript nos parece bastante familiar solamente nos quedará entender su sintaxis.

Para hacer una comparación entre TypeScript y Javascript diremos que el primero es de tipo estático y el segundo dinámico lo veremos en la siguiente tabla:

Ahora veremos cuales son las características principales de TypeScript:

  • Cualquier código JavaScript debe funcionar sin problemas en TypeScript.
  • Como en la tabla anterior, tipado estático.
  • Se pueden utilizar clases y módulos.
  • Constructores, propiedades, funciones.
  • Podemos usar interfaces.
  • Expresiones especiales como Fat arrows =>.
  • Intellisense y comprobación de sintaxis en tiempo real en la gran mayoría de las herramientas.

Por último podemos ver en el último gráfico la adopción de TypeScript a nivel desarrolladores y empresas que nos demuestra lo importante de su utilización.

¿Que necesitamos para empezar?

Lo primero que necesitamos tener instalado es Node.JS, puede ser decargado desde aqui https://nodejs.org/en/. Podemos usar cualquier procesador moderno, yo usare Visual Studio Code que puede ser descargado des aqui https://code.visualstudio.com/.

Una vez instalada estas 2 herramientas, desde el visual studio y su consola, debemos instalar TypeScript. Esto lo hacemos desde un paquete npm con el siguiente comando.

npm install -g typescript

Una vez instalada podemos validar la versión y la ayuda con los siguientes comandos.

tsc --version
tsc --help

Conclusión

En esta primera parte vimos que es y algunos de sus beneficios. También vimos la importancia de la adopción de este lenguaje de programación como un buen lenguaje al mejor estilo C# o Java. En próximos post de este tutorial iremos entrando más en detalle sobre el tema.

 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *