타입스크립트 올인원 : Part2 - 세션6

⭐️ Overview

@types/connect-flash

플래시는 메시지를 저장하는 데 사용되는 세션의 특수 영역입니다. 메시지는 플래시에 기록되고 사용자에게 표시된 후 지워집니다. 플래시는 일반적으로 리디렉션과 함께 사용되어 렌더링될 다음 페이지에서 메시지를 사용할 수 있도록 합니다

TypeScript connect-flash는 DT(Definitely Typed) 라이브러리가 존재합니다. D

npm install connect-flash

index.js파일에서는 commonJS 모듈를 사용하고 있습니다. TS에서 모듈 정의는 * as 다음과 같습니다.

import * as flash from 'connect-flash'

Definitely Typed는 커뮤니티 기반 타이핑으로 유저들이 직접 만들기 때문에 typescript의 정의 된 타입이 다를 수 도 있습니다.

Express connect-flash 라이브러리 타입 직접 만들기

import express, { ErrorRequestHandler, RequestHandler } from 'express'
import flash from 'connect-flash'

const app = express();
const port = 3000

app.use(flash());

const middleware: RequestHandler<{ paramType: string }, { message: string }, { bodyType: number }, { queryType: boolean }, { localType: unknown }> = (req, res, next) => {
  req.params.paramType,
  req.body.bodyType;
  req.query.queryType;
  res.locals.localType;
  res.json({
    message: 'hello',
  })

  req.flash('플래시 메시지');
  req.flash('1회성', '플래시 메세지');
  req.flash();
};

app.use(errorMiddleware)

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

connect-flash 라이브러리 타입을 직접 만듭니다.

mkdir Types
touch connect-flash.d.ts

Types 폴더를 생성하고 connect-flash.d.ts파일을 생성합니다.

declare module 'connect-flash' {
  import express = require('express')
  function flash(): Express.RequestHandler;
  export default flash;
}

다음과 같이 구현을 한다면 express.ts 파일에 app.use(flash());를 사용 할 수 있습니다.

middleware 함수에서 req.flash의 타입을 정의해야 합니다.

const middleware: RequestHandler<{ paramType: string }, { message: string }, { bodyType: number }, { queryType: boolean }, { localType: unknown }> = (req, res, next) => {
  req.flash('플래시 메시지');
  req.flash('1회성', '플래시 메세지');
  req.flash();
};

type 속성을 정의는 다음과 같습니다.

declare global {
  namespace Express {
    interface Request {
      flash(message: string): void;
      flash(event: string, message: string): void;
      flash(): {
        [key: string]: string[];
      };
    }
  }
}

Request는 express 내부에서 구현 된 부분이 많습니다. 그렇기 때문에 flash 함수에 Request를 사용하려면 namespace를 정의 한 다음 interface로 따로 구현체를 만들어줘야 합니다.

각 매개변수에 따라 오버로딩을 하고 각각 메서드를 정의합니다.

const middleware: RequestHandler<{ paramType: string }, { message: string }, { bodyType: number }, { queryType: boolean }, { localType: unknown }> = (req, res, next) => {
  req.flash('플래시 메시지');
  req.flash('1회성', '플래시 메세지');
  req.flash();
};

타입 정의가 완료가 되면 flash 라이브러리 타입 정의가 완료가 됩니다.