고급 TypeScript - 데코레이터: 클래스 데코레이터
데코레이터: 클래스 데코레이터
데코레이터는 TypeScript에서 메타프로그래밍을 가능하게 하는 기능으로, 클래스, 메서드, 접근자, 프로퍼티 및 매개변수에 대한 추가적인 동작이나 속성을 정의할 수 있습니다. 그 중에서도 클래스 데코레이터는 클래스를 정의하는 시점에 특정한 작업을 수행하거나 클래스를 수정하는 데 사용됩니다.
1. 클래스 데코레이터의 기본 개념
클래스 데코레이터는 함수로 구현되며, 해당 함수는 다음과 같은 파라미터를 가집니다:
- target: 데코레이트될 클래스의 생성자 함수입니다.
이러한 함수를 사용하여 새로운 클래스를 생성하거나 기존 클래스를 수정할 수 있습니다.
2. 간단한 예제
다음은 기본적인 클래스 데코레이터의 예시입니다:
function Logger(constructor: Function) {
console.log("클래스가 생성되었습니다:", constructor);
}
@Logger
class User {
constructor(public name: string) {}
}
const user = new User("Alice");
위 코드에서 Logger
라는 함수를 정의하고 이를 User
클래스에 적용했습니다. 이 경우 User
클래스를 인스턴스화할 때마다 콘솔에 "클래스가 생성되었습니다:"라는 메시지가 출력됩니다.
3. 고급 활용 예제
클래스 데코레이터를 사용하여 특정 속성을 추가하거나 변경할 수도 있습니다. 아래 예시는 새로운 속성을 추가하는 방법을 보여줍니다:
function AddAge(target: Function) {
target.prototype.age = 30; // 나이를 추가합니다.
}
@AddAge
class Person {
constructor(public name: string) {}
}
const person = new Person("Bob");
console.log(person.age); // 출력: 30
여기서 AddAge
라는 데코레이터를 통해 모든 Person
인스턴스에 age
라는 속성이 자동으로 추가되고 초기값이 설정됩니다.
4. 여러 개의 데코레이터 조합하기
TypeScript에서는 여러 개의 디렉터를 함께 사용할 수 있습니다. 아래와 같이 두 개 이상의 역할을 가진데corator를 결합해 보겠습니다:
function LogClass(target: Function) {
console.log(`Logging class creation for ${target.name}`);
}
function AddRole(role: string) {
return function (target: any) {
target.prototype.role = role;
};
}
@LogClass
@AddRole('Admin')
class AdminUser {
constructor(public username: string) {}
}
const admin = new AdminUser("Charlie");
console.log(admin.role); // 출력: Admin
이처럼 각각 다른 기능을 가진 두 개의 decorator가 결합되어 한 클래스에서 다양한 효과를 낼 수 있습니다.
요약
- 클래스 데코레이터는 TypeScript에서 메타프로그래밍과 관련된 중요한 도구이며, 주로 클래스를 수정하거나 확장하는 용도로 사용된다.
- 실질적으로 코드 작성 시 유용함을 제공하며 유지보수성과 재사용성을 높인다.
- 다양한 방식으로 객체 지향 프로그래밍 패러다임 내에서 코드를 더 구조적이고 관리하기 쉽게 만들 수 있다.
이와 같이 디렉터들을 활용하면 TypeScript 애플리케이션의 설계를 더욱 유연하고 강력하게 할 수 있습니다!