TypeScript의 데코레이터

TypeScript의 데코레이터는 메타데이터를 추가하거나 클래스, 메소드, 속성 또는 매개변수의 동작을 수정할 수 있는 강력한 기능입니다. 구성 요소와 서비스를 강화하기 위해 Angular와 같은 프레임워크에서 자주 사용됩니다. 초보자이든 숙련된 개발자이든 관계없이 이 문서에서는 TypeScript 애플리케이션을 향상시키기 위해 자신만의 데코레이터를 만드는 과정을 단계별로 안내합니다.

전제 조건

시작하기 전에 다음 사항을 확인하세요.

• TypeScript에 대한 기본 이해
• tsconfig.json 파일에서 ExperimentDecorators 옵션이 활성화되어 구성된 TypeScript:

{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

데코레이터란 무엇입니까?

데코레이터는 클래스, 메서드, 속성 또는 매개변수에 적용되는 함수입니다. @ 기호 앞에 데코레이터는 연결된 요소를 수정하거나 강화할 수 있습니다. 주요 용도는 다음과 같습니다.

• 메타데이터 추가: 클래스나 속성에 대한 추가 정보를 제공하는 데 유용합니다.
• 동작 수정: 메서드나 클래스의 작업을 동적으로 변경할 수 있습니다.
• 종속성 주입: 모듈식 아키텍처에 실용적입니다.

구성 요소 데코레이터 만들기

1단계: 데코레이터 정의

클래스에 componentName 속성을 추가하는 데코레이터를 생성하겠습니다.

function Component(name: string) {
    return function (constructor: Function) {
        constructor.prototype.componentName = name;
    };
}

설명:

이 데코레이터는 이름 문자열을 받아 클래스 프로토타입에 속성으로 추가합니다. 이 클래스의 모든 인스턴스는 이 속성에 액세스할 수 있습니다.

2단계: 데코레이터 적용

클래스에 데코레이터를 적용해 보겠습니다.

@Component('MonComposant')
class MonComposant {
    constructor() {
        console.log(`Le nom du composant est : ${this.componentName}`);
    }
}

3단계: 데코레이터 테스트

클래스의 인스턴스를 만들어서 어떻게 작동하는지 확인해 보겠습니다.

const composant = new MonComposant(); 
// Affiche : Le nom du composant est : MonComposant

입력 데코레이터 만들기

1단계: 입력 데코레이터 정의

이 데코레이터는 속성 변경 사항을 모니터링하고 기록합니다.

function Input() {
    return function (target: any, propertyKey: string) {
        let value: any;

        const getter = () => {
            return value;
        };

        const setter = (newValue: any) => {
            console.log(`La valeur de ${propertyKey} a été mise à jour : ${newValue}`);
            value = newValue;
        };

        Object.defineProperty(target, propertyKey, {
            get: getter,
            set: setter,
            enumerable: true,
            configurable: true,
        });
    };
}

설명:

데코레이터는 Object.defineProperty를 사용하여 속성 변경 사항을 가로챕니다. 이를 통해 변경 로깅과 같은 사용자 정의 로직을 추가할 수 있습니다.

2단계: 입력 데코레이터 적용

속성에 적용해 보겠습니다.

{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

3단계: 입력 데코레이터 테스트

효과를 관찰하려면 속성을 변경하세요.

function Component(name: string) {
    return function (constructor: Function) {
        constructor.prototype.componentName = name;
    };
}

결론

TypeScript 데코레이터는 클래스와 속성에 기능과 메타데이터를 추가하는 우아하고 강력한 방법을 제공합니다. 이 기사를 통해 다음 내용을 배웠습니다.

1. 클래스를 풍성하게 만드는 구성 요소 데코레이터를 만듭니다.
2. 속성 변경을 모니터링하기 위해 입력 데코레이터를 구현합니다.

이 간단한 예는 데코레이터가 코드의 가독성과 유지 관리성을 어떻게 향상시킬 수 있는지 보여줍니다. Reflect.metadata와 함께 반영된 메타데이터를 사용하는 등 훨씬 더 고급 애플리케이션을 발견하려면 공식 TypeScript 문서를 더 자세히 살펴보세요.

위 내용은 TypeScript의 데코레이터의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!