[NodeJS] TypeScript 사용 시 Request CustomType

코드가 잘 보이지 않으신다면 우측 하단의 달 모양을 눌러주시기 바랍니다.

 

최근 토이 프로젝트를 TypeScript로 진행하며 문제가 생긴 부분이 한 가지 있었습니다.

원래 JavaScript 를 이용해서 JWT 로그인 인증을 구현했을 때 req 객체에 임의의 값을 넣는데 이를 TypeScript로 이용을 하려 하니 문제가 있었습니다.

 

-JavaScript

const customMiddleWare = (req, res, next) => {
	req.authData = {
    	status : 200,
        jwt : {
        	accessToken : accessToken,
            refreshToken : refreshToken
        }
    }
    next()
}

 

이런 형태의 코드는 JavaScript 에서는 문제없이 해당 미들웨어를 거쳐서 엔드포인트로 넘어가게 됩니다.

하지만, TypeScript 의 경우는 많이 다르게 됩니다.

 

-TypeScript

const customMiddleWare = (req:Request, res:Response, next:NextFunction) => {
	req.authData = {
    	status : 200,
        jwt : {
        	accessToken : accessToken,
            refreshToken : refreshToken
        }
    }
    next()
}

 

Request 타입에는 authData 라는 속성이 존재하지 않기 때문에 에러를 뿜어내게 됩니다. 이럴 때 해결방법이 여러 개 있다고 합니다.

 

커스텀 파일 만들기

이 방식은 저는 작동이 되지 않았지만, 혹시나 이 방법을 통해서 해결하실분이 계실 것이라 생각하여 작성을 해 봅니다.

 

우선, @types 라는 폴더를 만들어 보도록 하겠습니다.

// ./src/customType/express.d.ts
import { UserInfoModel } from './user/models/user.model.ts';

declare global {
	namespace Express {
		interface Request {
			authData?: UserInfoModel;
		}
	}
}

이런 코드가 담긴 .d.ts 파일을 만들으셨다면, 이제 tsconsif.js를 수정하도록 하겠습니다.

{
   "compilerOptions": {
	   ...
      "typeRoots": ["./node_modules/@types","./src/customType"], 
   }
}

이렇게 typeRoots 에 위와 같이 작성을 해주시면 오류가 나지 않고 잘 작동한다고 합니다.

 

CustomType Interface

저는 이 방식으로 문제를 해결하였습니다.

우선, user 폴더 안에 requestCustomType.ts 라는 파일을 하나 생성해 줍니다.

 

// .user/RequestCustomType.ts
export interface CustomMiddleWareModel{
}

우리가 흔히 사용하는 interface 작성법 입니다. 하지만, 저희는 Requst에 속성을 부여해야하기 때문에 extands 를 이용하여 Request 를 추가하도록 하겠습니다.

// .user/RequestCustomType.ts
export interface CustomMiddleWareModel extends Request{
}

마지막으로 위에서 저희는 req.authData 에 JSON 형식의 값을 넣어야 합니다.

그렇게 하기 위해서는 interface 안에 authData 를 받을 수 있도록 해주어야겠지요?\

// .user/RequestCustomType.ts
export interface CustomMiddleWareModel extends Request{
	authData? : "UserInterface";
}

이처럼 해 준다면 준비는 모두 끝이나게 됩니다.

이제 이 interface 를 req:Request 대신 req:CustomMiddleWareModel 로 바꾸도록 하겠습니다.

import CustomMiddleWareModel from './requestCustomType.ts'
const customMiddleWare = (req:CustomMiddleWareModel, res:Response, next:NextFunction) => {
	req.authData = {
    	status : 200,
        jwt : {
        	accessToken : accessToken,
            refreshToken : refreshToken
        }
    }
    next()
}

 

이렇게 한 뒤 엔드포인트에도 CustomMiddleWareModel 을 적용시켜주어야 합니다.

app.get('/login', customMiddleWare, (req:CustomMiddleWareModel,res)=>{
	res.json(req.authData)
})

 

 

이 때문에 제가 거의 2시간동안 구글링을 하며 문제를 해결했던 것 같습니다...

TypeScript 를 하며 Request 에 새로운 속성을 부여하기 위해서는 위 방법들을 이용하시면 좋을 것 같습니다..!

다른 의견이 있으시다면 댓글 부탁드립니다!