def cashify(fn):
    def wrap():
        print("$$$$")
        fn()
        print("$$$$")
    return wrap

@cashify
def sayHello():
    print("hello!")

sayHello()

# $$$$
# hello!
# $$$$

def sayHello():
    print("hello!")

sayHello = cashify(sayHello)

• Python is a great way to explain the basics because its concept of decorators is a bit more straightforward than the way they work in JS.
• JS and TypeScript both use Python’s “pie syntax” to apply decorators to methods and properties of classes, so it’s visually and syntactically similar.

const oatmeal = {
  viscosity: 20,
  flavor: 'Brown Sugar Cinnamon',
};

console.log(Object.getOwnPropertyDescriptor(oatmeal, 'viscosity'));

/*
{
  configurable: true,
  enumerable: true,
  value: 20,
  writable: true
}
*/

• configurable determines whether or not the type of the property can be changed, and whether it can be deleted from the object.
• enumerable controls whether the property shows up when you enumerate the object’s properties (like when you call Object.keys(oatmeal) or use it in a for loop).
• writable controls whether or not you can change the property’s value via the assignment operator =.
• value is the static value of the property that you see when you access it. It’s usually the only part of the property descriptor that you see or are concerned with. It can be any JS value, including a function, which would make the property a method of the object it belongs to.

• get is a function that returns the property’s value instead of using the static value property.
• set is a special function that gets passed whatever you put on the right side of the equals sign as an argument when you assign a value to the property.

Decorating Without the Frills

Object.defineProperty(oatmeal, 'viscosity', {
  writable: false,
  value: 20,
});

// When I try to set oatmeal.viscosity to a different value, it'll just silently fail.
oatmeal.viscosity = 30;
console.log(oatmeal.viscosity);
// => 20

function decorate(obj, property, callback) {
  var descriptor = Object.getOwnPropertyDescriptor(obj, property);
  Object.defineProperty(obj, property, callback(descriptor));
}

decorate(oatmeal, 'viscosity', function(desc) {
  desc.configurable = false;
  desc.writable = false;
  desc.value = 20;
  return desc;
});

class Porridge {
  constructor(viscosity = 10) {
    this.viscosity = viscosity;
  }

  stir() {
    if (this.viscosity > 15) {
      console.log('This is pretty thick stuff.');
    } else {
      console.log('Spoon goes round and round.');
    }
  }
}

class Oatmeal extends Porridge {
  viscosity = 20;

  constructor(flavor) {
    super();
    this.flavor = flavor;
  }
}

const oatmeal = new Oatmeal('Brown Sugar Cinnamon');

/*
Oatmeal {
  flavor: 'Brown Sugar Cinnamon',
  viscosity: 20
}
*/

How to Write a Decorator

1. target is the class that our object is an instance of.
2. key is the property name, as a string, that we’re applying the decorator to.
3. descriptor is that property’s descriptor object.

function readOnly(target, key, descriptor) {
  return {
    ...descriptor,
    writable: false,
  };
}

class Oatmeal extends Porridge {
  @readOnly viscosity = 20;
  // (you can also put @readOnly on the line above the property)
  
  constructor(flavor) {
    super();
    this.flavor = flavor;
  }
}

Handling API Errors

1. Set the UI store’s networkStatus property to “loading.”
2. Send a request to the API
3. Handle the result
   • If successful, update local state with the response
   • If something goes wrong, set the UI store’s apiError property to the error we received
4. Set the UI store’s networkStatus property to “idle.”

class WidgetStore {
  async getWidget(id) {
    this.setNetworkStatus('loading');

    try {
      const { widget } = await api.getWidget(id);
      // Do something with the response to update local state:
      this.addWidget(widget);
    } catch (err) {
      this.setApiError(err);
    } finally {
      this.setNetworkStatus('idle');
    }
  }
}

function apiRequest(target, key, descriptor) {
  const apiAction = async function(...args) {
    // More about this line shortly:
    const original = descriptor.value || descriptor.initializer.call(this);
    
    this.setNetworkStatus('loading');

    try {
      const result = await original(...args);
      return result;
    } catch (e) {
      this.setApiError(e);
    } finally {
      this.setNetworkStatus('idle');
    }
  };

  return {
    ...descriptor,
    value: apiAction,
    initializer: undefined,
  };
}

class WidgetStore {
  @apiRequest
  async getWidget(id) {
    const { widget } = await api.getWidget(id);
    this.addWidget(widget);
    return widget;
  }
}

A Babel Workaround

class Example {
  @myDecorator
  someMethod() {
    // In this case, our method would be referred to by descriptor.value
  }

  @myDecorator
  boundMethod = () => {
    // Here, descriptor.initializer would be a function that, when called, would return our `boundMethod` function, properly scoped so that `this` refers to the current instance of Example.
  };
}

function customElement(name) {
  return function(target) {
    customElements.define(name, target);
  };
}

@customElement('intro-message');
class IntroMessage extends HTMLElement {
  constructor() {
    super();

    const shadow = this.attachShadow({ mode: 'open' });
    this.wrapper = this.createElement('div', 'intro-message');
    this.header = this.createElement('h1', 'intro-message__title');
    this.content = this.createElement('div', 'intro-message__text');
    this.header.textContent = this.getAttribute('header');
    this.content.innerHTML = this.innerHTML;

    shadow.appendChild(this.wrapper);
    this.wrapper.appendChild(this.header);
    this.wrapper.appendChild(this.content);
  }

  createElement(tag, className) {
    const elem = document.createElement(tag);
    elem.classList.add(className);
    return elem;
  }
}

<intro-message header="Welcome to Decorators">
  <p>Something something content...</p>
</intro-message>