기억 휘발 방지소

[TypeScript] Express에 TypeScript 적용하기 본문

Web/TypeScript

[TypeScript] Express에 TypeScript 적용하기

choice91 2022. 2. 8. 23:12
728x90
반응형

설치한 라이브러리들은 다음과 같다

  • express
  • typescript
  • @types/express: Express 모듈에 대한 type을 지원
  • @types/node: Node.js 타입을 추가
  • nodemon

 

먼저 간단한 예시 코드를 만들었다.

// app.ts
import express from "express";

const app = express();

app.listen(4000, () => {
  console.log("✅ Server listening on 4000");
});

 

에러처리를 위한 미들웨어를 만드는데 JavaScript로 했을 때와 좀 다른게 매개변수의 타입을 다 적어줘야했다.

express.Request, express.Response, express.NextFunction을 넣어줘도 되고 아래 코드처럼 해도 된다.

// app.ts
import express, { Request, Response, NextFunction } from "express";

// ...

app.use((err: Error, req: Request, res: Response, next: NextFunction) => {
  return res.status(500).json({ message: err.message });
});

 

route를 작성할 땐 다음과 같이 해준다.

import { Router } from "express";

const router = Router();

router.메소드("/", 컨트롤러);

export default router;

 

controller를 작성할 때 JavaScript로 했을 때와 차이가 있다.

// controller.js
export const 메서드 = (req, res, next) => {
  // ...
};

JavaScript로 할 때는 위에 코드처럼 했는데 TypeScript를 적용하면 아래 코드와 같이 req, res, next에 대해 타입을 지정해줘야한다.

// controller.ts
import { Request, Response, NextFunction } from "express";

export const 메서드 = (
  req: Request,
  res: Response,
  next: NextFunction
) => {};

일일이 req, res, next에 대한 타입을 다 적어줘도 되지만 아래 코드처럼 RequestHandler를 사용하면 더 짧게 작성할 수도 있다.

// controller.ts
import { RequestHandler } from "express";

export const 메서드: RequestHandler = (req, res, next) => {};
728x90
반응형