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.
Codebrains Newsletter
Get weekly dev news and tutorials.
This post is also available in:
English
About The Author: James Coonce
James Coonce is a programmer from Tampa Fl that has a love for golf, travel and language learning. When he's not hitting golf balls, he's probably watching foreign movies.
More posts by James Coonce