Please enable JavaScript.

Coggle requires JavaScript to display documents.

8.1: Decorators - Coggle Diagram

8.1: Decorators

- - - - actually shows the whole class
        
        as they're syntactic sugar for constructor functions
    - - prints before the constructor output
      - because
        
        class decorators execute when a class is defined:explode:
        
        not when it's instantiated
- - - - that will be called at runtime with information about the decorated declaration
    - - given the decorator
        
        @sealed
      - the function might look like...
        
        function sealed(target) { // do something with 'target' ... }

decorator factories

class example

function Logger(logString: string) {
  return function(constructor: Function) {
    console.log(logString);
    console.log(constructor);
  };
}

to apply to a class

@Logger('LOGGING - PERSON')
class Person {
  name = 'Max';

  constructor() {
    console.log('Creating person object...');
  }
}

used for meta-programming

example

you might provide a decorator function

function WithTemplate(template: string, hookId: string) {
  return function(constructor: any) {
    const hookEl = document.getElementById(hookId);
    const p = new constructor();
    if (hookEl) {
      hookEl.innerHTML = template;
      hookEl.querySelector('h1')!.textContent = p.name;
    }
  }
}

a third party might use it

@WithTemplate('<h1>My Person Object</h1>', 'app')
class Person {
  name = 'Max';

  constructor() {
    console.log('Creating person object...');
  }
}

to replace a div component

<head>
  <meta charset="UTF-8">
  <script src="dist/app.js" defer></script>
</head>
<body>
  <div id="app"></div>
</body>
</html>