[TypeScript] 클래스 상속 시 편하게 입력하기

상황

최근 PG사 연동 업무할 일이 생겼는데, 파라미터로 넘겨야 할 항목들이 꽤 많았다.

차근차근 뜯어보니 클라이언트 쪽에서 넘겨야 할 변수는 적은데 비해, 서버쪽에서 넘겨야 할 값들은 거의 상수에 가까웠다.

처음에는 TypeScript 에서 제공하는 DTO 형태로 모든 파라미터를 다 넣었더니 너무 많아서 조잡해보였고,

간단하게 만들기 위해 유저가 받는 DTO를 따로 둔 뒤, 상속받아서 쓰는 게 좋겠다고 생각이 들었다.

 

근데 여기서 문제는 파라미터를 하나씩 주입시키자니 너무 비효율적이였다.

예를 들면 이렇다.

# 유저 입력 DTO
export class BaseDTO {  
  param1: number;
  param2: string;
  param3: number;
  param4: string;
  

  constructor(param1: number, param2: string, param3: number, param4: string) {
    this.param1 = param1;
    this.param2 = param2;
    this.param3 = param3;
    this.param4 = param4;
  }
}

# 서버에서 입력시킬 DTO
export class ServerDTO extends BaseDTO {
  param5: number;
  param6: number;
  param7: number;
  
  constructor(param1: number, param2: string, param3: number, param4: string) {
    super(param1, param2, param3, param4);    
  }
}

위의 그림에서 변수의 갯수만큼 생성자에 값을 넣자니 너무 비효율적이고, 코드가 더러워서

어떻게 해야 좋을 지 검색하다가 방법을 찾았다

 

방법

생성자에 Partial 타입으로 데이터를 입력시키면 된다.

 

# 유저 입력 DTO
export class BaseDTO {  
  param1: number;
  param2: string;
  param3: number;
  param4: string;
  
  constructor(partial: Partial<BaseDTO>) {
    Object.assign(this, partial);
  }
}

# 서버에서 입력시킬 DTO
export class ServerDTO extends BaseDTO {
  param5: number;
  param6: number;
  param7: number;
  
  constructor(partial: Partial<BaseDTO>) {
    super(partial);
  }
}

 

 

아 깔끔해져서 보기 좋아졌다.

쓰면서 조금은 생략한 부분이 있지만, @ApiProperty 나 @IsNotEmpty를 두어 검증하면 더 좋다

 

참고

[1] https://clownhacker.tistory.com/247

[2] https://greatlaboratory.dev/nestjs/nestjs-02/#mapped-types