Primeros pasos en TypeScript

¿Qué es TypeScript?

Bueno, en pocas palabras TypeScript es un superset de JavaScript. ¿Y esto que significa 🤔? Significa que TypeScript, al final del día, es un lenguaje de programación que se construye sobre JavaScript. No es un lenguaje nuevo, si no, que a partir del lenguaje JavaScript añade nuevas caracteristicas y ventajas (Podriamos decir que hace que escribir código Javascript sea más fácil y potente).

Hasta aquí, parece todo perfecto, pero tenemos una gran desventaja. Y es que TypeScript no puede ser ejecutado por entornos de JavaScript.

Estos entornos son tales como:

• Navegadores
• Node Js

Entonces, ¿Por qué decimos que es un 'JavaScript' mejorado, pero no podemos utilizarlo?

TypeScript es un lenguaje de programación, pero también es una herramienta (o compilador), que se ejecuta sobre su código para compilar de TypeScript a Javascript. Como resultado final lo que se obtiene es JavaScript.

Bueno, eso por supuesto trae una pregunta importante, ¿Cómo puede TypeScript añadir nuevas características si lo que se obtiene al final son archivos .js normales? Y la respuesta es que el compilador de TypeScript compila estas nuevas características en soluciones de JavaScript, por lo que al final se obtiene una sintaxis mucho más agradable, una forma mucho más fácil de hacer algo, y que luego va a compilar esa forma más agradable y fácil en un fragmento de JavaScript más complejo, que se tendría que escribir de otra manera.

Además, TypeScript, por supuesto, hace una cosa importante, que el nombre ya implica. Añade tipos, una característica al lenguaje JavaScript que en realidad le dará a los desarrolladores, una oportunidad de identificar errores en su código antes de que su script se ejecute.

Por lo tanto, no sólo le da algunas nuevas características, y formas más agradables de hacer algo, sino que también le da una comprobación de errores adicional donde los errores que de otro modo obtendría como errores de tiempo de ejecución pueden ser detectados y corregidos temprano durante el desarrollo.

Entonces, ¿por qué utilizar TypeScript? Veamos el siguiente ejemplo, una función JavaScript bastante sencilla que suma dos números.

const add = (num1, num2) => num1 + num2;

console.log(add('2','5')) 

Ahora, cuando ejecutemos esta funcion, lo que estamos pasando por parametros son string en lugar de number. Por lo tanto, cuando se invoca esta funcion, obtenemos como resultado un comportamiento no deseado. ¿Y esto por que? Pues, por que en JavaScript, se concatenarán las cadenas en lugar de realizar el cálculo matematico.

Resultado esperado: 7
Resultado actual: '25'

Pequeñas cosas que ocurren en JavaScript...

Este error como tal no es un error técnico, por lo que probablemente no se obtendra un error de ejecución, pero lo que sí podemos estar seguros, es que se tiene un error lógico en el código.

Y eso, por supuesto, puede llevar a grandes problemas en las aplicaciones web que estás escribiendo con JavaScript.

Si bien podemos añadir una condición if en la función para comprobar los tipos de las entradas en tiempo de ejecución, también podríamos validar la entrada del usuario, y aunque podríamos querer hacer todo eso también sería bueno si pudiéramos detectar errores como este durante el desarrollo.

const add = (num1, num2) => {
  if (typeof num1 !== 'number' || typeof num2 !== 'number') {
    return +num1 + +num2
  }

  return num1 + num2
}

De esta manera, podemos asegurarnos que la suma que realizamos en nuestra función add es una operación matemática. Pero, ¿Es esto lo mejor? Bien, aquí es donde entra TypeScript.

Instalando TypeScript

Bien, en este punto nos podemos guiar de la docomentación de TypeScript, la cual es bastante intuitiva. Para no hacer este post eterno, utilizaremos la herramienta de npm que viene en el paquete cuando isntalamos Node.

npm install -g typescript

Ahora, creamos nuestro archivo con extensión .ts y probemos nuevamente nuestra función anterior

Podemos observar en nuestro IDE (en este caso VS Code), nos da un par de errores durante el desarrollo de nuestra función. Estos errores sin del siguiente tipo

Parameter 'num1' implicitly has an 'any' type.ts(7006)
──────────────────────────────────────────────────────
(parameter) num1: any

TypeScript nos está alertando, en primera instancia que especifiquemos que tipo de dato queremos que tenga nuestro parametro num1. Entonces, lo que haremos en este caso es especificar que tanto num1 como num2 son parámetros de tipo number.

Una vez especificados los tipos de datos de nuestros parametros, podemos observar que ahroa nos advierte que cuando invocamos nuestra funcion , estamos cometiendo un error. Este error es por que nuestra función está esperando 2 parametros de tipo number. Por lo que podemos corregirlo de dos formas.

De esta manera podemos observar, que durante el desarrollo de nuestra app, pudimos alertar todos estos pequeños errores lógicos que muchas veces pasan desapercibidos. A gran escala, utilizar TypeScript es de mucha ayuda.