[TypeScript] class-transformer 사용하기

class-transformer란?

자바스크립트에는 두 가지 형태의 객체가 있다.

• literal objects : Obejct 클래스의 인스턴스 / { } 표기법을 통해 생성
• class(constructor) objects : 생성자, 프로퍼티 및 메소드가 있는 크랠스의 인스턴스

class-transformer 는 자바스크립트의 literal object를 class object로 쉽게 변환해준다.

서버에서 데이터를 얻고 나서 간편한 방식으로 호출할 수 있고, 이 호출한 데이터를 자동 변환해준다.

 

공식 문서 : https://github.com/typestack/class-transformer

GitHub - typestack/class-transformer: Decorator-based transformation, serialization, and deserialization between objects and cla

 

 

 

 

 

 

 

설치하기

npm으로 설치

$ npm install class-transformer --save
$ npm install relfect-metadata --save

yarn 으로 설치

$ yarn add class-transformer
$ yarn add reflect-metadata

 

 

 

 

 

 

적용 예제 : plainToClass 사용해서 변환하기

// product.model.ts
export class Product {
	title: string;
	price: number;

	constructor(t: string, p: number) {
		this.title = t;
		this.price = p;
	}

	getInformation() {
		return [this.title, `${this.price}`];
	}
}

생성한 class가 있다.

 

만약에 class-tranformer를 사용하지 않을 경우 아래와 같이 코드를 작성해야 한다.

// app.ts
import { Product } from './product.model';

// 서버로부터 얻는 프로덕트
const products = [{title: 'A Carpet', price: 29.99}, [title: 'A Book', price: 10.99}] 
// 자바스크립트 오브젝트지만 우리 product model의 instance는 아니다

// model의 instance로 변환하기
const loadedProducts = products.map(prod => {
		return new PRoduct(prod.title, prod.price);
});

const p1 = new Product('A Book', 12.99);

console.log(p1.getInformatioin());  // [A Book, $12.99]

서버로부터 없는 프로덕트를 받아왔기 때문에 이를 Product 클래스로 만들기 위해서는 변환이 필요하다.

 

 

위의 방법이 아니라 painToClass(변환하고자 하는 클래스, 변환할 데이터) 를 사용하면 훨씬 간편하다.

// app.ts (class-transform 사용)
import 'reflect-metadata';
import { plainToClass } from 'class-transform';  // loadedProducts 설정에 사용 가능

import { Product } from './product.model';

// 서버로부터 얻는 프로덕트
const products = [{title: 'A Carpet', price: 29.99}, [title: 'A Book', price: 10.99}] 

// model의 instance로 변환하기
const loadedProducts = palinToClass(Product, products);

훨씬 간편하게 사용할 수 있다!

 

 

plainToClas 를 제외한 다양한 method는 깃허브 리드미에 있으니 찾아서 사용하면 된다.

(+ 순수 자바스크립트 파일에서도 사용 가능하다)

 

 

 

 

 

 

 

 

 

---

유데미에서 강의를 듣다가 처음 들은거라 공식 깃허브에도 들어가보고 구글링도 해봤는데, 좀 큰 규모에서 사용하는 것 같다. 아직 어떤 식으로 사용할지 감이 잡히진 않지만, 예제를 통해 코드를 보면, 클래스 기반의 프로그래밍을 할 때 변환이 훨씬 쉬워보이긴 하다.

쉬운 예제라서 그렇게 느끼는가 싶기도 하고....? 아무튼 새로 또 하나 배운다.