Escrever código com TypeScript é ótimo, mas há alguns lugares no código onde é realmente complicado deixar o TypeScript brilhar. Um deles é ao definir rotas no Express.

Este artigo descreve algumas das maneiras de adicionar TypeScript aos objetos Express.Requeste Express.Response.

Configurando o Express

Vamos fazer o básico primeiro.

import Express from 'express';
import http from 'http';
let app: Express.Application | undefined = undefined;
export function InitializeExpress(port = 3001): void {
app = Express();
    app.use(Express.urlencoded({ extended: true }));
app.get('/', function (_req: Express.Request, res: Express.Response) {
        res.status(200).json({
            "Foo": "Bar",
             "Time": new Date().toISOString()
        });
    });
// Add 404 handler
   app.use(function (_req: Express.Request, res: Express.Response) {
      res.status(404).send("Not found");
   });
// Start server (app.listen can also be used)    
   http.createServer(app).listen(port, () =>  
    console.log(`Running at http://localhost:${port}/`));
}

{"Foo":"Bar","Time":"2021-09-21T19:32:15.091Z"}

O objeto Express.Request é definido como:

interface e.Request<P = ParamsDictionary, ResBody = any, ReqBody = any, ReqQuery = QueryString.ParsedQs, Locals extends Record<string, any> = Record<string, any>>

export interface TypedRequestBody<T> extends Express.Request {
    body: T
}

app.post('/login', function (req: TypedRequestBody<{ username: string, password: string }>, res: Express.Response) {
const success = req.body.username === "foo"
                    && req.body.password === "bar";
res.status(200).json({ "Success": success });
});

Express.Request .query

Modificar o queryem Express.Request é um pouco mais complicado, porque o Express usa tipos de express-serve-static-core, que por sua vez o Express não expõe. Portanto, a única maneira de obter os tipos adequados é import { Query } from 'express-static-serve-core';. A solução é fazer:

import { Query } from 'express-serve-static-core';
export interface TypedRequestQuery<T extends Query> extends Express.Request {
query: T
}

app.get('/article/:id', function (req: TypedRequestQuery<{ id: string }>, res: Express.Response) {
const id = req.query.id;
// Fetch from database here and return article
res.status(200).json({ ID: id });
});

Vamos fazer outro tipo, onde ambosbody e querypode ser digitado:

export interface TypedRequest<T extends Query, U> extends Express.Request {
    body: U,
    query: T
}

app.put('/article/:id', function (req: TypedRequest<{ id: string }, { name: string }>, res: Express.Response) {
console.log(`Updating article ${req.query.id}`);
        console.log(`setting name to ${req.body.name}`);
        res.status(200).json({ Success: true });
});

O TypeScript não existe no tempo de execução, então até mesmo o código está configurado para esperar uma carga útil de:

{ username: string, password: string }

{ username: undefined, password: ["Hello", "World"] }

PS:

Se você deseja gerar funções de validador automaticamente a partir de interfaces / tipos TypeScript, leia este artigo: https://javascript.plainenglish.io/how-to-automatically-convert-typescript-types-to-runtime-validators-5b06ee269b13

Express.Response

Novamente o Express usa tipos de express-serve-static-core:

import { Send } from 'express-serve-static-core';

export interface TypedResponse<ResBody> extends Express.Response {
json: Send<ResBody, this>;
}

app.get('/ping', function (_req: Express.Request, res: TypedResponse<{ Pong: string }>) {
res.status(200).json({ "Pong": new Date().toISOString() });
});

Código-fonte de demonstração?

https://github.com/tomnil/typedexpress

Aproveitar :)

Mais conteúdo em plainenglish.io