TUTORIAL
Aprende TypeScript Desde Cero: Qué es, instalación y tipado
TypeScript se ha convertido en una herramienta esencial para desarrolladores que buscan un código JavaScript más estructurado y fácil de mantener. En este tutorial, aprenderás qué es TypeScript, cómo instalarlo y cómo el tipado estático puede ayudarte a escribir código más robusto y seguro, créeme, te dará mucha paz a la larga 🙏.
Si estás empezando con TypeScript o quieres aprender desde 0, este artículo te guiará paso a paso, desde la instalación hasta los conceptos básicos del tipado.
¿Qué es TypeScript?
TypeScript es un superconjunto de JavaScript desarrollado por Microsoft que añade una capa adicional de tipado estático. Este lenguaje se compila a JavaScript, permitiendo detectar errores de tipado en tu editor de código y así mejorar la robustez del código.
A diferencia de JavaScript, que tiene un tipado débil y dinámico, TypeScript permite definir tipos explícitos, haciendo el código más seguro y predecible. En cuanto lo pruebes, te aseguro que no querrás volver atrás.
¿Qué es el tipado?
El tipado permite definir el tipo de valor que una variable o constante puede contener, ya sea un número, una cadena de texto, un objeto, una instancia de clase, un booleano, entre otros. Esto ayuda a prevenir la reasignación de un valor de tipo distinto y proporciona información sobre los datos en tiempo de desarrollo, lo cual resulta especialmente útil al trabajar con instancias de clases y estructuras complejas.
¿Qué necesito saber para poder seguir este tutorial?
Para seguir este tutorial, es importante que tengas conocimientos previos de JavaScript y Node.js. Si aún no los tienes, te sugiero adquirir primero esos conocimientos y luego regresar para continuar.
Instalación de TypeScript
En este tutorial vamos a ver como podemos usarlo tanto desde una web como en la terminal y los ejemplos se podrán ejecutar en cualquiera de los dos casos, aunque yo lo haré desde la terminal.
Para instalar TypeScript, primero necesitaremos tener instalado Node.js y npm que es el instalador de paquetes de Node.js. Para instalarlo, puedes seguir el siguiente enlace: https://nodejs.org/en/download/package-manager.
Una vez instalado Node.js o si ya lo teníais, vamos a crearnos un proyecto en el que trabajar con TypeScript y testar los distintos ejemplos que vamos a ver. Para ello, yo me he creado una carpeta llamada primeros-pasos-ts
. Accedemos a ella desde la terminal y lanzamos el siguiente comando para inicializar el proyecto:
npm init -y
Una vez inicializado el proyecto, lanzamos el siguiente comando para instalar TypeScript y poder utilizarlo en nuestros scripts que funcionarán por la terminal:
npm install --save-dev ts-node
También vamos a instalar TypeScript de forma global. Esto nos ayudará más adelante para convertir archivos de TypeScript a JavaScript y para generar el archivo de configuración de TypeScript:
npm install -g typescript
El siguiente paso es generar el archivo de configuración de TypeScript, para ello lanzamos el siguiente comando:
tsc --init
Este archivo establece configuraciones básicas de compilación, interoperabilidad de módulos, verificación estricta y velocidad de compilación. Además, incluye comentarios sobre otras opciones disponibles que se podrían habilitar para personalizar aún más el proyecto según las necesidades específicas.
Las más destacables son:
target: "es2016": Especifica que el código TypeScript se compilará a JavaScript compatible con ES2016.
module: "commonjs": Define que el código de módulos se generará en formato CommonJS, comúnmente utilizado en entornos Node.js.
Ahora, dentro de nuestro proyecto, vamos a crear una carpeta llamada src y dentro de ella un archivo con el nombre de tutorial.ts
. Dentro de este archivo añadimos la siguiente línea para confirmar que todo funciona correctamente:
console.log(`Hello world`)
Como ves, es código JavaScript que vamos a usar para confirmar que funciona todo, más adelante vamos a ver código TypeScript.
Por último, abrimos el archivo package.json
y añadimos la siguiente línea dentro de scripts
:
"run:tutorial": "ts-node src/tutorial.ts",
De esta forma añadimos el comando para poder ejecutar nuestro script, de tal forma que tu archivo debe lucir así:
{