decorator

https://github.com/tc39/proposal-decorators

The three steps of decorator evaluation:
Decorator expressions (the thing after the @) are evaluated interspersed with computed property names.
Decorators are called (as functions) during class definition, after the methods have been evaluated but before the constructor and prototype have been put together.
Decorators are applied (mutating the constructor and prototype) all at once, after all of them have been called.

The semantics here generally follow the consensus at the May 2016 TC39 meeting in Munich.

挟まれて評価されますってなんだ。
クラス定義中に関数として呼び出される。
メソッドが評価された後、コンストラクタとプロトタイプがまとめられる前に呼び出される？？
コンストラクタとプロトタイプってまとめられるの？クラスをそこまで理解してない。マージみたいなことしてるのか？
すべてのデコレータが呼び出された後に、一度に適用されるのね。ok

kind: The kind of decorated value. This can be used to assert that the decorator is used correctly, or to have different behavior for different types of values. It is one of the following values.
"class"
"method"
"getter"
"setter"
"field"
"auto-accessor"
name: The name of the value, or in the case of private elements the description of it (e.g. the readable name).
access: An object containing methods to access the value. This is only available for private class elements, since public class elements can be accessed externally by knowing the name of the element. These methods also get the final value of the private element on the instance, not the current value passed to the decorator. This is important for most use cases involving access, such as type validators or serializers. See the section on Access below for more details.
isStatic: Whether or not the value is a static class element. Only applies to class elements.
isPrivate: Whether or not the value is a private class element. Only applies to class elements.
addInitializer: This is available if the decorator was called as an @init: decorator, which is discussed in more detail below.
setMetadata: Allows the user to define some metadata to be associated with this property. This metadata can then be accessed on the class via Symbol.metadata. See the section on Metadata below for more details.

大体さっきまでに出てきた。

Decorators are applied after all decorators have been called. The intermediate steps of the decorator application algorithm are not observable--the newly constructed class is not made available until after all method and non-static field decorators have been applied.
The class decorator is called only after all method and field decorators are called and applied.
Finally, static fields are executed and applied.

うーんやっぱりクラスの評価順がわかったほうがいいね。
メソッド、フィールドデコレータ→クラスデコレータ→スタティックフィールドの順らしい。

This decorators proposal uses the syntax of the previous Stage 2 decorators proposal. This means that:
Decorator expressions are restricted to a chain of variables, property access with . but not [], and calls (). To use an arbitrary expression as a decorator, @(expression) is an escape hatch.
Class expressions may be decorated, not just class declarations.
Class decorators come after export and default.
There is no special syntax for defining decorators; any function can be applied as a decorator.

@(expression)できるの？それ大丈夫？

なにclass expressionってclass declarationsならわかるけど。

exportとdefaultの後に？そこに書くの？

type ClassMethodDecorator = (value: Function, context: {
  kind: "method";
  name: string | symbol;
  access?: { get(): unknown };
  isStatic: boolean;
  isPrivate: boolean;
  addInitializer?(initializer: () => void): void;
  getMetadata(key: symbol);
  setMetadata(key: symbol, value: unknown);
}) => Function | void;

Class method decorators receive the method that is being decorated as the first value, and can optionally return a new method to replace it. If a new method is returned, it will replace the original on the prototype (or on the class itself in the case of static methods). If any other type of value is returned, an error will be thrown.

okok

By default, method decorators do not receive access to the instances of the class, and cannot be used to add functionality that requires it. An example of such a decorator is the @bound decorator, which would bind the method to the instance of the class. In order to add instance initialization logic, users must use the @init: modifier (see below for more details).

なんとなくok

An example of a method decorator is the @logged decorator. This decorator receives the original function, and returns a new function that wraps the original and logs before and after it is called.

function logged(value, { kind, name }) {
  if (kind === "method") {
    return function (...args) {
      console.log(`starting ${name} with arguments ${args.join(", ")}`);
      const ret = value.call(this, ...args);
      console.log(`ending ${name}`);
      return ret;
    };
  }
}

class C {
  @logged
  m(arg) {}
}

new C().m(1);
// starting m with arguments 1
// ending m

え、あーそういうことなのね。なんか色々繋がったぞ。TypeORMのアレとか、関数をimportして使ってただけか。

This example roughly "desugars" to the following (i.e., could be transpiled as such):

class C {
  m(arg) {
    this.x = arg;
  }
}

C.prototype.m = logged(C.prototype.m, {
  kind: "method",
  name: "m",
  isStatic: false,
  isPrivate: false,
  setMetadata() { /**/ }
}) ?? C.prototype.m;

これはさっきまでに出てきた

type ClassGetterDecorator = (value: Function, context: {
  kind: "getter";
  name: string | symbol;
  access?: { get(): unknown };
  isStatic: boolean;
  isPrivate: boolean;
  addInitializer?(initializer: () => void): void;
  setMetadata(key: symbol, value: unknown);
}) => Function | void;

type ClassSetterDecorator = (value: Function, context: {
  kind: "setter";
  name: string | symbol;
  access?: { set(value: unknown): void };
  isStatic: boolean;
  isPrivate: boolean;
  addInitializer?(initializer: () => void): void;
  getMetadata(key: symbol);
  setMetadata(key: symbol, value: unknown);
}) => Function | void;

こうなってるのか

Accessor decorators receive the original underlying getter/setter function as the first value, and can optionally return a new getter/setter function to replace it. Like method decorators, this new function is placed on the prototype in place of the original (or on the class for static accessors), and if any other type of value is returned, an error will be thrown.
Accessor decorators are applied separately to getters and setters. In the following example, @foo is applied only to get x() - set x() is undecorated:

sette,getterに両方適用されないのか。

class C {
  @foo
  get x() {
    // ...
  }

  set x(val) {
    // ...
  }
}

We can extend the @logged decorator we defined previously for methods to also handle accessors. The code is essentially the same, we just need to handle additional kinds.

function logged(value, { kind, name }) {
  if (kind === "method" || kind === "getter" || kind === "setter") {
    return function (...args) {
      console.log(`starting ${name} with arguments ${args.join(", ")}`);
      const ret = value.call(this, ...args);
      console.log(`ending ${name}`);
      return ret;
    };
  }
}

class C {
  @logged
  set x(arg) {}
}

new C().x = 1
// starting x with arguments 1
// ending x

ふむ

This example roughly "desugars" to the following (i.e., could be transpiled as such):

class C {
  set x(arg) {}
}

let { set } = Object.getOwnPropertyDescriptor(C.prototype, "x");
set = logged(set, {
  kind: "setter",
  name: "x",
  isStatic: false,
  isPrivate: false,
  getMetadata() { /**/ }
  setMetadata() { /**/ }
}) ?? set;

Object.defineProperty(C.prototype, "x", { set });

Unlike methods and accessors, class fields do not have a direct input value when being decorated. Instead, users can optionally return an initializer function which runs when the field is assigned, receiving the initial value of the field and returning a new initial value. If any other type of value besides a function is returned, an error will be thrown.
We can expand our @logged decorator to be able to handle class fields as well, logging when the field is assigned and what the value is.

デコレータ種類多いなー

The initializer function is called with the instance of the class as this, so field decorators can also be used to bootstrap registration relationships. For instance, you could register children on a parent class:

const CHILDREN = new WeakMap();

function registerChild(parent, child) {
  let children = CHILDREN.get(parent);

  if (children === undefined) {
    children = [];
    CHILDREN.set(parent, children);
  }

  children.push(child);
}

function getChildren(parent) {
  return CHILDREN.get(parent);
}

function register() {
  return function(value) {
    registerChild(this, value);

    return value;
  }
}

class Child {}
class OtherChild {}

class Parent {
  @register child1 = new Child();
  @register child2 = new OtherChild();
}

let parent = new Parent();
getChildren(parent); // [Child, OtherChild]

weekmapはあんまり使ってないんでわからないが、こういう使い方もできるのか。

Class auto-accessors are a new construct, defined by adding the accessor keyword in front of a class field:

class C {
  accessor x = 1;
}

Auto-accessors, unlike regular fields, define a getter and setter on the class prototype. This getter and setter default to getting and setting a value on a private slot. The above roughly desugars to:

class C {
  #x = 1;

  get x() {
    return this.#x;
  }

  set x(val) {
    this.#x = val;
  }
}

すごい簡潔

オートアクセサやばい、めんどい

desugars, desugarsってなんだこれって思った。上のaccessorみたいなのをdesugarsっていうのか。syntax sugarっぽいことなんだろう。こういうふうにも書けますよ。みたいな

メタデータは便利そうだけど、頭がこんがらがる。使ってみてだな。

雰囲気は理解しました