Front

[ts] Object를 Class로 변환 (class-transformer)

챛채 2024. 10. 11. 19:00

외부에서 들어온 JSON 응답을 내부 로직에 쓰거나 내부 데이터를 외부로 보내줘야할 때 들어온 JSON을 그대로 사용하거나 plain Object를 만들어 반환해줄 때가 있는데 이런 방식은 외부 세부 사항이 그대로 들어나기 때문에 내부로직을 더럽힐 확률이 높다. 

이를 해결할 방안으로는 class-transformer가 있다.

 

PlainToClass  PlainToInstance

유저 API를 호출해 아래와 같은 JSON을 응답받음

{
    username: "Kim",
    birthDate: "1900-09-02"
}

 

유저의 나이를 알기 위해서는 나이 계산 코드를 따로 분리해서 작성해줘야한다.

function calculateAge(){
    var today = new Date();
    var birthDate = new Date(dateString);
    var age = today.getFullYear() - birthDate.getFullYear();
    var m = today.getMonth() - birthDate.getMonth();
    if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
        age--;
    }
    return age;
 }
 
 
calculateAge(apiResult.birthDate)

 

이런 경우 plainToInstance를 활용하면 간단하다.

먼저 유저 API를 호출해서 가져온 정보로 만들 클래스를 만들고

class User{
    username: string
    birthDate: string
    
    // 나이를 계산하는 로직 
    get age() {
        var today = new Date();
        var birthDate = new Date(this.birthDate);
        var age = today.getFullYear() - birthDate.getFullYear();
        var m = today.getMonth() - birthDate.getMonth();
        if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
           age--;
        }
        return age;
    }
}

PlainToInstance를 이용해 클래스로 만들어준다.

import { plainToClass } from "class-transformer";

const user = plainToClass(User, apiResult);
console.log(user);
//User { username: 'kim', birthDate: '1900-09-02' }

console.log(user.age);