logo cosasdedevs

Artículos y tutoriales del mundo tech

Últimos artículos

Aprende TypeScript Desde Cero: Qué es, instalación y tipado

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í:

{
My Profile
Nov 04, 2024

TUTORIAL

Parte 6: Autenticación y registro con Symfony 6

En el tutorial de esta semana vamos a aprender como generar automáticamente el sistema de registro y autenticación con Symfony 6. Gracias a las herramientas que incluye Symfony 6, este realizará la mayor parte del trabajo y nosotros solo tendremos que realizar unos pequeños ajustes para ponerlo a punto 💪.

My Profile
Mar 07, 2023
5470 vistas

TUTORIAL

Parte 5: Optimización de queries con Doctrine, ajustes y página de post en Symfony 6

En este tutorial profundizaremos en el ORM Doctrine para optimizar nuestras queries y por consiguiente la velocidad de respuesta de nuestra web y añadiremos algunos ajustes en nuestro proyecto en Symfony 6. También crearemos la página para consultar un post en concreto y veremos como generar las urls automáticamente a cada post en Twig.

My Profile
Feb 28, 2023
3374 vistas

Sobre mi

👋 Mi nombre es Alber, soy Backend PHP - Python - Node.js Developer y de vez en cuando enredo también en el Frontend.

Saber más

Nos tomamos en serio tu privacidad

Utilizamos cookies propias y de terceros para recopilar y analizar datos sobre la interacción de los usuarios con cosasdedevs.com. Ver política de cookies.