TS 데코레이터(1/2): 기본 사항

29715 단어 typescriptjavascript
  • Introduction
  • Decorators
  • Enable decorators

  • Types of decorators
  • Overview over signatures
  • Order of evaluation

  • Decorator factories
  • Decorator composition

  • Resources
  • ECMAScript proposals

  • Wrap Up
  • Feedback welcome

  • 소개

    This is the first post of a series related to TypeScript decorators.

    This post should answer the following questions:
    ⁉️ What are decorators? What types of decorators are there?
    ⁉️ How can they be used?
    ⁉️ When are they executed?

    Later posts will show implementations for each of the decorator types and provide some use cases.

    데코레이터

    Decorators are a stage 2 ECMAScript proposal ("draft"; purpose: "Precisely describe the syntax and semantics using formal spec language."). Therefore, the feature isn't included in the ECMAScript standard yet. TypeScript (early) adopted the feature of decorators as an experimental feature.

    But what are they? In the ECMAScript proposal 다음과 같이 설명됩니다.

    Decorators @decorator are functions called on class elements or other JavaScript syntax forms during definition, potentially wrapping or replacing them with a new value returned by the decorator.



    TypeScript handbook 데코레이터는 다음과 같이 설명됩니다.

    Decorators provide a way to add both annotations and a meta-programming syntax for class declarations and members.



    좀 더 일반적인 방식으로 표현하자면 코드의 특정 부분에 데코레이터로 주석을 달아 동작을 변경할 수 있습니다. 데코레이터로 주석을 달 수 있는 코드 부분은 Types of decorators 섹션에 설명되어 있습니다.

    보너스: Design Patterns book by the Gang of Four 에 설명된 데코레이터 패턴도 있습니다. 그 의도는 다음과 같이 설명됩니다.

    to add responsibilities to individual objects dynamically and transparently, that is, without effecting other objects.


    데코레이터 활성화

    Since decorators are an experimental feature, they are disabled by default. You must enable them by either enabling it in the tsconfig.json or passing it to the TypeScript compiler ( tsc ). You should also at least use ES5 as a target (default is ES3).

    tsconfig.json

    {
      "compilerOptions": {
        "target": "ES5",
        "experimentalDecorators": true
      }
    }
    

    CLI

    tsc -t ES5 --experimentalDecorators
    
    You might also want to have a look at the related Emit Decorator Metadata 설정(이 게시물의 범위가 아님)

    데코레이터의 종류

    There are 5 different types of decorators:

    • class decorators
    • property decorators
    • method decorators
    • accessor decorators (== method decorator applied to getter / setter function)
    • parameter decorators

    The following example shows where they can be applied:

    // this is no runnable code since the decorators are not defined
    
    @classDecorator
    class Polygon {
      @propertyDecorator
      edges: number;
      private _x: number;
    
      constructor(@parameterDecorator edges: number, x: number) {
        this.edges = edges;
        this._x = x;
      }
    
      @accessorDecorator
      get x() {
        return this._x;
      }
    
      @methodDecorator
      calcuateArea(): number {
        // ...
      }
    }
    

    Class constructors can not have a decorator applied.

    서명에 대한 개요

    Each of the decorator functions receives different parameters. The accessor decorator is an exception, because it is essentially just a method decorator, which is applied to an accessor (getter or setter).

    The different signatures are defined in node_modules/typescript/lib/lib.es5.d.ts :

    interface TypedPropertyDescriptor<T> {
      enumerable?: boolean;
      configurable?: boolean;
      writable?: boolean;
      value?: T;
      get?: () => T;
      set?: (value: T) => void;
    }
    
    declare type ClassDecorator = <TFunction extends Function>(target: TFunction) => TFunction | void;
    // also applies for accessor decorators
    declare type PropertyDecorator = (target: Object, propertyKey: string | symbol) => void;
    declare type MethodDecorator = <T>(target: Object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>) => TypedPropertyDescriptor<T> | void;
    declare type ParameterDecorator = (target: Object, propertyKey: string | symbol, parameterIndex: number) => void;
    

    평가 순서

    The different types of decorators are evaluated in the following order:
    ⬇️ instance members: Property Decorators first and after that Accessor, Parameter or Method Decorators
    ⬇️ static members: Property Decorators first and after that Accessor, Parameter or Method Decorators
    ⬇️ Parameter Decorators are applied for the constructor.
    ⬇️ Class Decorators are applied for the class.

    Bringing the different types, their signatures and order of evaluation together:

    
    function propertyDecorator(target: Object, propertyKey: string | symbol) {
      console.log("propertyDecorator", propertyKey);
    }
    function parameterDecorator(target: Object, propertyKey: string | symbol, parameterIndex: number) {
      console.log("parameterDecorator", propertyKey, parameterIndex);
    }
    function methodDecorator<T>(target: Object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>) {
      console.log("methodDecorator", propertyKey);
    }
    function accessorDecorator<T>(target: Object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>) {
      console.log("accessorDecorator", propertyKey);
    }
    function classDecorator(target: Function) {
      console.log("classDecorator");
    }
    
    @classDecorator
    class Polygon {
      @propertyDecorator
      private static _PI: number = 3.14;
      @propertyDecorator
      edges: number;
      private _x: number;
    
      constructor(@parameterDecorator edges: number, x: number) {
        this.edges = edges;
        this._x = x;
      }
    
      @methodDecorator
      static print(@parameterDecorator foo: string): void {
        // ...
      }
    
      @accessorDecorator
      static get PI(): number {
        return Polygon._PI;
      }
    
      @accessorDecorator
      get x() {
        return this._x;
      }
    
      @methodDecorator
      calcuateArea(@parameterDecorator bar: string): number {
        return this.x * 2;
      }
    }
    
    console.log("instantiating...")
    new Polygon(3, 2)
    
    // Output:
    //   [LOG]: "propertyDecorator",  "edges"
    //   [LOG]: "accessorDecorator",  "x"
    //   [LOG]: "parameterDecorator",  "calcuateArea",  0
    //   [LOG]: "methodDecorator",  "calcuateArea"
    //   [LOG]: "propertyDecorator",  "_PI"
    //   [LOG]: "parameterDecorator",  "print",  0
    //   [LOG]: "methodDecorator",  "print"
    //   [LOG]: "accessorDecorator",  "PI"
    //   [LOG]: "parameterDecorator",  undefined,  0
    //   [LOG]: "classDecorator"
    //   [LOG]: "instantiating..."
    
    Open example in Playground

    데코레이터 공장

    Maybe you already asked yourself, after having a look at the different signatures, how to pass additional properties to the decorator functions. The answer to that is: with decorator factories.

    Decorator factories are just functions wrapped around the decorator function itself. With that in place, you are able to pass parameters to the outer function in order to modify the behavior of the decorator.

    Example:

    function log(textToLog: string) {
      return function (target: Object, propertyKey: string | symbol) {
        console.log(textToLog);
      }
    }
    
    class C {
      @log("this will be logged")
      x: number;
    }
    
    // Output:
    //   [LOG]: "this will be logged"
    
    Open example in Playground :

    이 예가 그다지 흥미롭지 않다는 것을 알고 있지만 많은 가능성을 열어줍니다. 그러나 나는 이 시리즈의 다음 부분을 위해 그것들 중 일부를 보관할 것입니다 😉

    데코레이터 구성

    Can you apply multiple decorators at once? Yes! In what order are they executed? Have a look:

    function log(textToLog: string) {
      console.log(`outer: ${textToLog}`)
      return function (target: Object, propertyKey: string | symbol) {
        console.log(`inner: ${textToLog}`)
      }
    }
    
    class C {
      @log("first")
      @log("second")
      x: number;
    }
    
    // Output:
    //   [LOG]: "outer: first"
    //   [LOG]: "outer: second"
    //   [LOG]: "inner: second"
    //   [LOG]: "inner: first"
    
    Open example in Playground

    데코레이터 팩토리는 발생 순서대로 실행되고 데코레이터 기능은 역순으로 실행됩니다.

    자원

    🔗 TypeScript Handbook - Decorators
    🔗 GitHub issue discussion about adding Decorators to TypeScript

    ECMAScript 제안

    🔗 ECMAScript proposals
    🔗 ECMAScript decorator proposal

    마무리

    The first part of this series addressing TypeScript decorators was about the basics. By now you should now what decorators are, how they look and how they are executed. In the next parts I'd like to provide some examples of more useful decorators for each type.

    피드백 환영

    I'd really appreciate your feedback. What did you (not) like? Why? Please let me know, so I can improve the content.

    I also try to create valuable content on Twitter: .

    Read more about frontend and serverless on my blog .

    좋은 웹페이지 즐겨찾기