,

📘 Crea tu API REST desde cero con TypeScript, Node.js y Express, utilizando tipos estáticos en tu desarrollo.

Posted by


📘 Tutorial TypeScript con Node.js y Express. ¡Crea tu API REST con tipos estáticos DESDE CERO!

En este tutorial, aprenderĂĄs cĂłmo crear una API REST utilizando TypeScript, Node.js y Express. TypeScript es un lenguaje de programaciĂłn que extiende JavaScript agregando tipos estĂĄticos, lo cual te permite reducir errores durante el desarrollo y tener un cĂłdigo mĂĄs robusto.

Antes de comenzar, asegĂșrate de tener Node.js instalado en tu mĂĄquina. Puedes descargarlo desde https://nodejs.org.

Paso 1: ConfiguraciĂłn del proyecto

Lo primero que debemos hacer es crear una nueva carpeta para nuestro proyecto. Abre tu terminal y ejecuta el siguiente comando:

mkdir tutorial-typescript

Luego, ingresa al directorio recién creado:

cd tutorial-typescript

Ahora, inicialicemos nuestro proyecto de Node.js ejecutando el siguiente comando:

npm init -y

Este comando crearĂĄ un archivo package.json con la configuraciĂłn bĂĄsica de nuestro proyecto.

Paso 2: InstalaciĂłn de dependencias

Para poder utilizar TypeScript, necesitamos instalarlo como una dependencia de desarrollo. Ejecuta el siguiente comando:

npm install typescript --save-dev

También necesitaremos instalar los tipos de TypeScript para Node.js y Express:

npm install @types/node @types/express --save-dev

AdemĂĄs, instalaremos Express como una dependencia regular:

npm install express

Ahora que tenemos todas las dependencias instaladas, podemos pasar al siguiente paso.

Paso 3: ConfiguraciĂłn de TypeScript

En la raĂ­z de tu proyecto, crea un archivo llamado tsconfig.json con la siguiente configuraciĂłn:

{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"outDir": "dist",
"strict": true,
"esModuleInterop": true
},
"include": [
"src/**/*.ts"
],
"exclude": [
"node_modules"
]
}

Esta configuraciĂłn le indica al compilador de TypeScript cĂłmo debe transpilar nuestro cĂłdigo y dĂłnde debe colocar los archivos de salida.

Paso 4: CreaciĂłn de la API REST

Crea una carpeta llamada src en la raĂ­z de tu proyecto. Dentro de esta carpeta, crea un archivo llamado index.ts con el siguiente cĂłdigo:

import express, { Request, Response } from 'express';

const app = express();
const port = 3000;

app.get('/', (req: Request, res: Response) => {
res.send('ÂĄHola TypeScript con Node.js y Express!');
});

app.listen(port, () => {
console.log(`Servidor corriendo en http://localhost:${port}`);
});

En este cĂłdigo, estamos importando el mĂłdulo express y las interfaces Request y Response de este mĂłdulo. Luego, estamos creando una instancia de la aplicaciĂłn express y definiendo un punto de entrada en la ruta ‘/’ que devuelve un mensaje de saludo.

Finalmente, iniciamos el servidor en el puerto 3000.

Paso 5: CompilaciĂłn y ejecuciĂłn del proyecto

Para compilar nuestro proyecto TypeScript, ejecuta el siguiente comando:

npx tsc

Esto generarĂĄ los archivos JavaScript en la carpeta dist.

Una vez que la compilaciĂłn haya finalizado, puedes ejecutar tu API REST con el siguiente comando:

node dist/index.js

ÂĄFelicidades! Ahora podrĂĄs acceder a tu API REST en http://localhost:3000 y ver el mensaje de saludo.

En este tutorial, has aprendido cĂłmo crear una API REST utilizando TypeScript, Node.js y Express. Has visto cĂłmo configurar el proyecto, instalar las dependencias necesarias, configurar TypeScript y crear una API bĂĄsica. Ahora puedes explorar y expandir tu API agregando mĂĄs rutas, controladores y lĂłgica de negocio.

¥Diviértete creando tu propia API REST con tipos eståticos!

0 0 votes
Article Rating
20 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Laza MH
7 months ago

Me hubiera gustado que levantaras los Unit test ya que es super importante

Antonio Montalvo
7 months ago

Excelente video muy didĂĄctico, una pregunta tendrĂĄs algĂșn vĂ­deo donde muestres como generar el build para producciĂłn del proyecto??? Gracias por compartir tu conocimiento. Saludos.

Felipe Mendieta
7 months ago

EstĂĄ genial el video gracias Midu, solo una aclaraciĂłn, el cĂłdigo NO SE COMPILA, cuando pasa de typescript a Javascript esto se llama TRANSPILAR, solo esa aclaraciĂłn ya que varias veces dices "compilar".

Ángel RaĂșl Recio Guerrero
7 months ago

Sacas Eslint de la nada, o el thinder client como si todos supieramos que es y nisiquiera explicas que se tiene que instalar aparte, por algo es tutorial desde cero, otras cosas las sobreexplicas sin ser necesario 👎

Gerson Pineda
7 months ago

Excelente, aprendo mucho de ti, gracias por todos tus aportes.

Abraham Rodriguez Ventura
7 months ago

Que theme usa? me gusta mucho el diseño

SL TECHNOLOGY
7 months ago

tengo una duda si escribo el codigo en TS -> se convierte a JS que sentido tiene si node correria es el en start JS y en dev en TS, lo digo en el caso de correr solo TS sin convertir a JS y ya ?

Giovanni Adamo
7 months ago

Excelente!!! Ahora una explicaciĂłn con este mismo cĂłdigo de cĂłmo se hace el deploy a AWS, usando Elastic B o quizĂĄs transformar esto a funciones lambda!

el bromas
7 months ago

Te quiero bro

Renny Luzardo
7 months ago

Yo guardaria el archivo utils.ts dentro de la carpeta libs. Excelente video he aprendido bastante, muchas gracias. 👍

chibolo
7 months ago

esto es nivel junior?

Ed soto huamanhorcco
7 months ago

jeje yo que ya habia visto el error desde que probe antes , pero esperando como lo encuentra terrible y no saber como decir ahi esta, ahi ahi (tremendo crack aprendi bastante recien estoy comenzando con typescript y me parecio muy bueno gracias a lo genial que lo explico )

Tomas Ponce
7 months ago

La explicaciĂłn que se da a partir del 23:30 es magistral. Me ayudĂł mucho. Gracias!

Diego Polverelli
7 months ago

Alto curso, Midudev…!!! espectacular…!!! Muchas gracias.

Maicol Avila
7 months ago

Genial!, consulta el repositorio esta?

Osho Osho
7 months ago

esto aĂșn es nivel pollo. no he visto en este video y otros de este canal el asunto de manejar las rutas como un verdadero profesional. eso de andar importando todas las rutas de venir y por haber, en el archivo app.ts y luego tener que usarlas en ese mismo archivo con app.use….. es una chapuza!!!!!!!. ASÍ LO HACEN EL 99%!!!!!!!! ahora imagĂ­nense que el directorio routes tenga mĂĄs o menos la siguiente estructura:

routes
index.ts
items.ts
otro.ts
otromas.ts
unomas.ts


subCarpeta


100 archivos aquĂ­ .ts


100 carpetas mĂĄs aquĂ­, cada una con cientos de archivos .ts

qué pretenden?

llenar el app.ts a punta de imports y use??????? naaahhhhh, pero nadie hasta ahora ha subido un ejemplo de como lidiar con esta situaciĂłn!

Rodrigo Moreno
7 months ago

Que extensiĂłn es la que te dice 0 complementaciĂłn encima de las interfaces?

Juan Martin Maidana
7 months ago

si no es mucha molestia, alguien sabe como se llama la extensiĂłn que te dice lo errores en el cĂłdigo sin tener que hacer hover en el error?

Juan Martin Maidana
7 months ago

sos un tipazo

Ari Olvera B.
7 months ago

Super bien explicado, genial que dejes los errores para saber como encontrarlos. Muchas gracias Midu