Configuración de Express con Typescript

This post is also available in: English

Una de las extensiones más populares de JavaScript es Typescript. Se trata de un superconjunto de JavaScript que permite la comprobación de tipos, la comprobación de errores y la compilación en versiones anteriores de JavaScript para la compatibilidad con diferentes entornos como aplicaciones de navegador y servidor. En este tutorial, vamos a repasar cómo utilizar Typescript con Express. El código fuente se puede encontrar aquí y los cursos se pueden encontrar aquí.

Configuración del Proyecto

Para empezar, primero debemos crear nuestro directorio.

mkdir express-typescript && cd express-typescript

Ahora debemos crear nuestro inicializar nuestra aplicación node. js y la compatibilidad de configuración con Typescript. Esto supone que ya tiene Typescript instalado en su sistema. Si no es así, puede instalarlo globalmente con el código siguiente.

npm install -g typescript

Ahora vamos a instalar nuestras dependencias de aplicaciones.

npm init
npm install --save express body-parser

npm install --save-dev @types/body-parser @types/express ts-node nodemon typescript

tsc –init

mkdir server
touch server/server.ts

Esto instalará Express, así como Typescript en nuestro proyecto. El archivo Server.ts será nuestro punto de entrada.

Crear Nuestros models

Crearemos archivos modelo que serán el plano de los datos que queremos volver en nuestra API ExpressJS. Crearemos un modelo de usuario. server/models/user.ts

export default class User {

    username: String;
    name: String;
    email: String;

    constructor(name: String, username: String, email: String) {
        this.name = name;
        this.username = username;
        this.email = email;
    }

    getUsername() {
        return this.username;
    }
    getName() {
        return this.name;
    }
}

Aquí puede ver que cada usuario tiene un nombre, usuario y dirección de correo electrónico.

Creación de Nuestros Controladores

Si usted está familiarizado con el patrón MVC, los controladores se utilizan para los datos marciales dentro de su aplicación. Hacemos peticiones HTTP al controlador, obtener datos de un origen de datos si uno está disponible y luego devolvemos esos datos al usuario.

Aquí vamos a crear un archivo controlador en el server/controllers/home.ts

import { Request, Response } from "express";

import User from '../models/user';
/* GET home page. */
export let index = (req: Request, res: Response) => {
    let languages = [
        {
            language: 'Spanish'
        },
        {
            language: "French"
        },
        {
            langauge: "German"
        }
    ];
    res.json(languages);
};

export let users = (req: Request, res: Response) => {

    let users = [
        new User('James Coonce', 'jcoonce', 'james@none.com'),
        new User('Jim Coonce', 'jimcoonce', 'jim@none.com'),
        new User('Norman', 'jcoonce', 'norman@none.com'),
    ];

    res.json(users);
};

export let create = (req: Request, res: Response) => {
    let user = new User(req.body.name, req.body.username, req.body.email);
    res.json(user);
};

Exportamos los diferentes métodos para posteriormente ser usados en nuestro archivo server.ts.

import express from "express";
import bodyParser from "body-parser";

// Controllers (route handlers)
import * as homeController from "./controllers/home";

const server = express();

server.use(bodyParser.json());
server.use(bodyParser.urlencoded({ extended: true }));


server.get('/', homeController.index);
server.get('/users', homeController.users);
server.post('/users/create', homeController.create);

server.listen(3000, function () {
    console.log('Example app listening on port 3000!')
});

Ejecutando nuestra aplicación ExpressJS

Ahora que tenemos nuestra Express API distribuida, vamos a ejecutar nuestra aplicación. Modifique nuestro archivo tsconfig para que nos permita ejecutar nuestra aplicación desde la línea de comandos.

{
  "compilerOptions": {
    "target": "ES2015",   
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true
  }
}

{
  "name": "express-typescript",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "nodemon dist/server.js",
    "build": "tsc"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/body-parser": "^1.17.0",
    "@types/express": "^4.11.1",
    "nodemon": "^1.17.5",
    "ts-node": "^6.0.5",
    "typescript": "^2.8.3"
  },
  "dependencies": {
    "body-parser": "^1.18.3",
    "express": "^4.16.3"
  }
}

Desde su línea de comandos, ahora puede ejecutar el inicio de la compilación y la gestión de la NMP y ahora debería ver su API.

Typescript API

Conclusion

Usando Typescript, hay muchas maneras diferentes de configurar su aplicación. Puede colocar sus controladores dentro de los archivos de clase, utilizar asincrónico/esperar cuando se utiliza la solicitud e incluso utilizar frameworks como Nest.js para una forma más obstinada de construir su aplicación Express. El repositorio de github se puede encontrar aquí.  Además, estad atentos a los cursos y más tutoriales sobre Typescript y Express.

This post is also available in: English