Розширення інтерфейсу запиту в Express.js з використанням TypeScript

5 Березня 2024 в 20:53 129

Процес розробки веб-додатків може стикатися з різними викликами, зокрема з необхідністю розширення інтерфейсів в популярних фреймворках, таких як Express.js. В даній статті ми розглянемо проблему розширення інтерфейсу запиту в Express.js з використанням TypeScript та запропонуємо рішення для цієї задачі.

Уявімо ситуацію, де ми розробляємо веб-додаток на Node.js з використанням Express.js та TypeScript. Ми хочемо розширити інтерфейс запиту (Request) з Express.js, додавши до нього додаткові властивості. Наприклад, нам потрібно додати ідентифікатор користувача (ID) та об’єкт користувача (user), щоб мати змогу працювати з авторизованими користувачами у наших маршрутах та обробниках запитів.

Перед початком роботи з розширенням інтерфейсу запиту важливо зазначити, що TypeScript надає нам можливість створювати свої власні типи та інтерфейси, що дозволяє зробити код більш читабельним та безпечним. Проте, коли ми намагаємося розширити інтерфейси, надані фреймворками, такими як Express.js, можуть виникати певні труднощі.

No overload matches this call.
The last overload gave the following error.
Argument of type '(request: Request, response: Response, next: NextFunction) => Promise<void>' is not assignable to parameter of type 'Application<Record<string, any>>'.
Type '(request: Request, response: Response<any, Record<string, any>>, next: NextFunction) => Promise<void>' is missing the following properties from type 'Application<Record<string, any>>': init, defaultConfiguration, engine, set, and 63 more.

No overload matches this call.

The last overload gave the following error.

Argument of type '(request: Request, response: Response, next: NextFunction) => Promise<void>' is not assignable to parameter of type 'Application<Record<string, any>>'.

Type '(request: Request, response: Response<any, Record<string, any>>, next: NextFunction) => Promise<void>' is missing the following properties from type 'Application<Record<string, any>>': init, defaultConfiguration, engine, set, and 63 more.

Помилка, яку ми отримали, вказує на те, що наша нова функція обробника запиту не відповідає типу, очікуваному в Express.js. Це стається через те, що функція не відповідає очікуваному типу для обробника маршрутів.

Щоб вирішити цю проблему, спочатку переконайтеся, що ви встановили необхідні залежності, такі як TypeScript та Express.js. Після цього можна приступати до створення власного інтерфейсу запиту.

Створимо файл interfaces/Request.ts, де оголосимо наш розширений інтерфейс запиту:

import { Request as ExpressRequest } from "express";
import { User } from "@prisma/client";
interface Request extends ExpressRequest {
  id: string;
  user: User;
}
export default Request;

import { Request as ExpressRequest } from "express";

import { User } from "@prisma/client";

interface Request extends ExpressRequest {

id: string;

user: User;

}

export default Request;

Тепер, коли ми маємо власний інтерфейс запиту, ми можемо використовувати його у наших обробниках запитів. Наприклад, в контролері controllers/auth/login.ts:

import { Response } from "express";
import Request from "../../interfaces/Request";
const loginHandler = async (request: Request, response: Response) => {};
export default loginHandler;

import { Response } from "express";

import Request from "../../interfaces/Request";

const loginHandler = async (request: Request, response: Response) => {};

export default loginHandler;

А також у маршрутизаторі routers/auth.ts:

import { Router } from "express";
import loginHandler from "../controllers/auth/login";
const authRouter = Router();
authRouter.get("/login", loginHandler);
export default authRouter;

import { Router } from "express";

import loginHandler from "../controllers/auth/login";

const authRouter = Router();

authRouter.get("/login", loginHandler);

export default authRouter;

Не забудьте також змінити імпорт інтерфейсу запиту у вашому основному файлі, де ви встановлюєте маршрутизатори:

import express from "express";
// App routers
import routers from "./routers";
const app = express();
const useRouters = () => {
  routers.forEach(({ path, routeHandler }) => {
    app.use(path, routeHandler);
  });
};
useRouters();
const port = process.env.PORT || '3500'
app.listen(port, () => {
  console.log(`Сервер слухає на порту ${port}`);
});

import express from "express";

// App routers

import routers from "./routers";

const app = express();

const useRouters = () => {

routers.forEach(({ path, routeHandler }) => {

app.use(path, routeHandler);

});

};

useRouters();

const port = process.env.PORT || '3500'

app.listen(port, () => {

console.log(`Сервер слухає на порту ${port}`);

});

Після внесення змін та використання нового інтерфейсу запиту, помилка повинна бути вирішена, і ваші обробники запитів повинні працювати як очікується.

У даній статті ми розглянули проблему розширення інтерфейсу запиту в Express.js з використанням TypeScript та надали рішення для цієї задачі. Пам’ятайте про важливість типізації та безпеки вашого коду при розробці веб-додатків з використанням таких популярних фреймворків, як Express.js та мови програмування TypeScript.