Inicio

Pequeño tutorial para configurar Express con Typescript

Este es un pequeño tutorial donde crearemos un proyecto Express desde cero utilizando TypeScript. Porque sí!!, una vez que utilizas TypeScript ya no quieres dejarlo.

Para comenzar crearemos un proyecto utilizando Yarn, tu también puedes hacerlo utilizando npm si así lo deseas. Así que para comenzar utilizaremos el siguiente comando.

yarn init

Luego de escoger la configuración adecuada, es decir responder a todas las preguntas que yarn nos hace instalaremos las siguientes dependencias en nuestro proyecto.

yarn add express
yarn add @types/express
yarn add -D typescript
yarn add -D ts-node
yarn add -D nodemon

La primera es Express el framework que utilizaremos. El segundo es un @type de Express, este contiene el mismo código que Express, pero adecuado para utilizarlo con TypeScript. La tercera dependencia es TypeScript. La cuarta ts-node contiene el código necesario para que Nodejs pueda funcionar correctamente con TypeScript. Y la última nodemon la utilizaremos como una herramientas para correr nuestro servidor.

Este nos es un tutorial de Express, por lo que por ahora solo utilizaremos un pequeño código en Express que nos servirá para inicializar nuestro servidor. Para esto utilizamos el siguiente código en inde.ts.

// importamos express
import express from 'express'
// instanciamos express
const app = express()
const PORT = 8000
// declaramos lo que pasará cuando hagan una petición get
app.get('/', (req, res) => res.send('Express + TypeScript Server'))
// ponemos a escuchar a nuestro servidor express
app.listen(PORT, () => {
  console.log(`⚡️[server]: Server is running at https://localhost:${PORT}`)
})

Ahora agregaremos un script a nuestro archivo package.json para ejecutar nuestro servidor con ayuda de Nodemon. Recuerda que Nodemon no es más que una herramienta que nos ayuda a refrescar el servidor cada vez que hagamos cambios, de entre otras características más que este nos brinda.

Así mismo, aquí también indicaremos el archivo de entrada o inicialización de nuestro proyecto. Para esto utilizamos la propiedad main donde indicaremos el archivo index.ts.

"main": "index.ts",
"scripts": {
  "start": "nodemon index.ts"
},

Ahora que ya tenemos todo esto, lo único que nos falta es ejecutar nuestro proyecto utilizando el script que colocamos en el package.json.

yarn run start

Entonces ya podemos ingresar a https://localhost:8000 por postman o desde nuestro navegador para ver cómo nuestro servidor con Express responde.

Espero que este pequeño tutorial halla aclarado algunas dudas al respecto. Y cómo siempre lo digo, la práctica es la única forma de ser mejores. Así que a codear!!. Hasta un próximo tutorial.