Decorators in TypeScript

A function that wraps a method

A cart class has an addItem method. While you debug, you want a line in the console every time it's called. You could add a console.log to addItem, and then to every other method you want to watch. Or you could write the logging once, as a decorator, and put it on any method with an @ sign:

1function logged(method: (this: Cart, item: string) => number, context: ClassMethodDecoratorContext) {2  const name = String(context.name);3  return function (this: Cart, item: string) {4    console.log(`${name}("${item}")`);5    return method.call(this, item);6  };7}8 9class Cart {10  items: string[] = [];11 12  @logged13  addItem(item: string) {14    this.items.push(item);15    return this.items.length;16  }17}18 19const cart = new Cart();20console.log(cart.addItem("Tea"));

Lines 1 to 7 are the decorator, an ordinary function called logged. Line 12, @logged, puts it on addItem. When JavaScript defines the class, it calls logged once, with two inputs:

• method, the addItem function you wrote on lines 13 to 16.
• context, an object that describes it. Line 2 reads its name, "addItem". Its type, ClassMethodDecoratorContext, comes with TypeScript.

Line 3 returns a new function, a wrapper. The class keeps the wrapper in place of addItem. So when line 20 calls cart.addItem("Tea"), the wrapper runs: line 4 prints addItem("Tea"), and line 5 calls the original with the same this and item (call is explained in call, apply, and bind). The original returns 1, and line 20 prints 1.

Decorators are a JavaScript feature that is still being added to the language. TypeScript 5.0 and later supports them with no setting. The JavaScript decorators lesson covers what they do when your code runs; this lesson is about typing them, and about the older kind Angular uses.

What a decorator receives

Every standard decorator gets the same two inputs, (value, context). value is the thing being decorated. context describes it. Here is a decorator that prints what it gets:

1function describe(value: unknown, context: ClassMethodDecoratorContext) {2  const kind = context.kind;3  //    ^?4  const name = context.name;5  //    ^?6  console.log(`${kind} ${String(name)}, static: ${context.static}, private: ${context.private}`);7}8 9class Cart {10  @describe checkout() {}11}

Line 1 types context as a ClassMethodDecoratorContext. The query on line 3 shows that context.kind has the type "method": a literal type, exactly that one string. The query on line 5 shows name is a string | symbol, because a method can be named with a symbol. That's why the examples wrap it in String(). Line 10 decorates checkout, and the code prints method checkout, static: false, private: false.

Each kind of class member gets its own context type, and TypeScript picks the one JavaScript will pass. Read each row of the table as: put a decorator here, it gets this context, and this value.

Because each place has its own context type, TypeScript can tell when a decorator is in the wrong place. Move @logged around the class below:

1function logged(value: unknown, context: ClassMethodDecoratorContext) {2  console.log(`logged ${context.kind} ${String(context.name)}`);3}4 5class Cart {6  items: string[] = [];7  @logged checkout() { return this.items.length; }8  get size() { return this.items.length; }9}

Only On the method has no errors. The other three get a message that starts Unable to resolve signature of … decorator when called as an expression. In plain words: "TypeScript tried the call JavaScript will make here, with this member's value and context, and it doesn't fit your decorator's parameters." The message's next line names the part that doesn't fit, such as a ClassFieldDecoratorContext where a ClassMethodDecoratorContext goes. The output shows the code still runs once compiled: each time, context.kind tells the truth about where the decorator really is.

Typing a method decorator

The first logged only worked for Cart methods that take one string. To use one decorator on any method, make it generic, with a type parameter for each part of the method:

1function logged<This, Args extends unknown[], Return>(2  method: (this: This, ...args: Args) => Return,3  context: ClassMethodDecoratorContext<This, (this: This, ...args: Args) => Return>,4) {5  const name = String(context.name);6  return function (this: This, ...args: Args): Return {7    console.log(`${name}(${args.join(", ")})`);8    return method.call(this, ...args);9  };10}11 12class Cart {13  total = 0;14 15  @logged16  add(price: number, quantity: number) {17    this.total += price * quantity;18    return this.total;19  }20}21 22const total = new Cart().add(3, 2);23//    ^?24console.log(total);

Lines 1 to 4 name three blanks that TypeScript fills in from the method it decorates:

• This: the object the method runs on. For add, it's Cart.
• Args: the list of parameter types, here [price: number, quantity: number].
• Return: what the method gives back, here number.

Line 3 passes the same blanks to ClassMethodDecoratorContext<This, …>, so the context matches the method. Line 6 says the wrapper takes the same arguments and returns the same type as the original. That's why the query on line 23 still shows const total: number: the decorator didn't lose the method's types. Line 7 prints add(3, 2), and line 24 prints 6.

A typed decorator can also say which methods it accepts. This one only fits methods that return a number:

1function rounded<This, Args extends unknown[]>(2  method: (this: This, ...args: Args) => number,3  context: ClassMethodDecoratorContext<This, (this: This, ...args: Args) => number>,4) {5  return function (this: This, ...args: Args) {6    return Math.round(method.call(this, ...args));7  };8}9 10class Cart {11  @rounded total() { return 7.6; }12  @rounded label() { return "Cart"; }13}14 15console.log(new Cart().total());

Line 2 says the method must return a number, and line 6 rounds it. Line 11 is fine: total returns 7.6, and line 15 prints 8. Line 12 puts @rounded on label, which returns text. TypeScript marks it twice, on purpose:

• Unable to resolve signature of method decorator when called as an expression, whose next line says Argument of type '() => string' is not assignable to parameter of type '(this: Cart) => number': the method doesn't return a number.
• Decorator function return type … is not assignable: the number-returning wrapper can't replace a method that returns text.

The same shape works for timing. A timing decorator notes the time before and after the call, with performance.now(), which gives the time in milliseconds:

1function timed<This, Args extends unknown[], Return>(2  method: (this: This, ...args: Args) => Return,3  context: ClassMethodDecoratorContext<This, (this: This, ...args: Args) => Return>,4) {5  return function (this: This, ...args: Args): Return {6    const start = performance.now();7    const result = method.call(this, ...args);8    console.log(`${String(context.name)} took ${Math.round(performance.now() - start)}ms`);9    return result;10  };11}12 13class Cart {14  items = ["Tea", "Cake"];15 16  @timed17  saveCart() {18    return JSON.stringify(this.items);19  }20}21 22console.log(new Cart().saveCart());

Line 6 notes the start time, line 7 runs the original method, and line 8 prints how long it took. Saving two items is quick, so it prints something like saveCart took 0ms. Line 9 hands back the result, and line 22 prints ["Tea","Cake"].

@bound for event handlers

A method you pass as an event handler loses its object: button.addEventListener("click", cart.handleClick) calls handleClick with a different this (this in TypeScript covers why). A @bound decorator fixes it once, for every object. Turn it off and on:

1function bound<This extends object, Args extends unknown[], Return>(2  method: (this: This, ...args: Args) => Return,3  context: ClassMethodDecoratorContext<This, (this: This, ...args: Args) => Return>,4) {5  context.addInitializer(function () {6    Reflect.set(this, context.name, method.bind(this));7  });8}9 10class CartButton {11  count = 0;12 13  @bound14  handleClick() {15    this.count += 1;16    console.log(`Clicked ${this.count} times`);17  }18}19 20const button = new CartButton();21const onClick = button.handleClick;22onClick();23onClick();

Lines 1 to 8 are bound. It returns nothing, so the method stays as it is. Instead, line 5 calls context.addInitializer, which asks for setup work to run each time a new object is made. Line 6 is that work: it stores a copy of the method made with bind, which fixes this to the new object. Reflect.set(this, context.name, …) sets the property named by context.name, like this.handleClick = … when the name is in a variable.

Line 21 copies button.handleClick into onClick, as passing it to addEventListener would. With @bound, lines 22 and 23 print Clicked 1 times and Clicked 2 times. Without it, line 22 throws TypeError: Cannot read properties of undefined (reading 'count'), and TypeScript doesn't warn you.

You can stack decorators on one method. They run from the method outward:

1function note(label: string) {2  return function (method: unknown, context: ClassMethodDecoratorContext) {3    console.log(`${label} decorates ${String(context.name)}`);4  };5}6 7console.log("before the class");8 9class Cart {10  @note("first") @note("second") checkout() {}11}12 13console.log("after the class");14new Cart().checkout();

Line 1's note makes a decorator that prints its label. Line 10 puts two on checkout. It prints before the class, then second decorates checkout, then first decorates checkout, then after the class. The decorators run between lines 7 and 13, while the class is defined. Line 14 calls checkout, which prints nothing: decorators don't run again when you call the method.

So with @bound @logged, logged wraps the method first and bound binds the wrapper. The cart panel at the end of this lesson does exactly that.

Field and accessor decorators

A field is a property with a starting value, written in the class body. A field decorator can't see the value yet, so its value is undefined. It can give back a function that changes the starting value:

1function trimmed<This>(value: undefined, context: ClassFieldDecoratorContext<This, string>) {2  return function (initial: string) {3    return initial.trim();4  };5}6 7class SearchBox {8  @trimmed query = "  tea  ";9}10 11console.log(`[${new SearchBox().query}]`);

Line 1 types context as ClassFieldDecoratorContext<This, string>: a field that holds a string. Line 2 returns a function that gets the starting value, and line 3 trims it. Line 8 decorates query, so a new search box starts with "tea", and line 11 prints [tea].

1function trimmed<This>(value: undefined, context: ClassFieldDecoratorContext<This, string>) {2  return function (initial: string) {3    return initial.trim();4  };5}6 7class SearchBox {8  @trimmed limit = 10;9}

Line 8 puts @trimmed on limit, a number. TypeScript marks it, on purpose: Unable to resolve signature of property decorator when called as an expression, because a ClassFieldDecoratorContext<SearchBox, number> isn't the string field trimmed asks for. You can't trim a number.

A field decorator only changes the starting value. To check every value someone sets later, use an auto-accessor: a field written with the accessor keyword (TypeScript 4.9 added it). It works like a field, but it's stored behind a hidden getter and setter, so a decorator can replace them:

1function positive<This>(2  target: ClassAccessorDecoratorTarget<This, number>,3  context: ClassAccessorDecoratorContext<This, number>,4): ClassAccessorDecoratorResult<This, number> {5  return {6    set(value) {7      if (value <= 0) throw new RangeError(`${String(context.name)} must be above 0`);8      target.set.call(this, value);9    },10  };11}12 13class CartLine {14  @positive accessor quantity = 1;15}16 17const line = new CartLine();18line.quantity = 3;19console.log(line.quantity);20try {21  line.quantity = 0;22} catch (error) {23  console.log((error as Error).message);24}25console.log(line.quantity);

Line 2's target holds the hidden get and set. Line 4 says positive gives back new ones, and lines 6 to 9 replace only set: it throws a RangeError for 0 or less, and otherwise calls the real setter. Line 14 decorates quantity. Line 18 sets 3, and line 19 prints 3. Line 21 tries 0: line 23 prints quantity must be above 0, and line 25 still prints 3.

Decorator factories and class decorators

A decorator factory is a function that returns a decorator. You call it in the @ line, like @register("cart-badge"), to give the decorator settings. Here it's on a whole class:

1const registry = new Map<string, unknown>();2 3function register(tag: string) {4  return function (value: unknown, context: ClassDecoratorContext) {5    registry.set(tag, value);6    console.log(`registered <${tag}> as ${String(context.name)}`);7  };8}9 10@register("cart-badge")11class CartBadge {}12 13console.log(registry.get("cart-badge") === CartBadge);

Line 3's register takes a tag name and returns the real decorator on line 4. A class decorator gets the class itself as value, and a ClassDecoratorContext. Line 10 calls register("cart-badge"), and the decorator it returns runs on CartBadge. Line 5 saves the class in a Map under its tag, and line 6 prints registered <cart-badge> as CartBadge. Line 13 prints true: the map holds the class. A web component library can register your custom elements this way, so you don't call customElements.define yourself.

Forget the brackets on a factory, and TypeScript notices:

1function logged(prefix: string) {2  return function <This, Args extends unknown[], Return>(3    method: (this: This, ...args: Args) => Return,4    context: ClassMethodDecoratorContext<This, (this: This, ...args: Args) => Return>,5  ) {6    return function (this: This, ...args: Args): Return {7      console.log(`[${prefix}] ${String(context.name)}(${args.join(", ")})`);8      return method.call(this, ...args);9    };10  };11}12 13class Cart {14  items: string[] = [];15 16  @logged17  addItem(item: string) {18    this.items.push(item);19    return this.items.length;20  }21}

Lines 1 to 11 are a factory: logged(prefix) returns the decorator on line 2. Line 16 writes @logged with no brackets, so JavaScript would call logged itself as the decorator, with the method as the prefix. TypeScript marks line 16, on purpose: the next line of the message says Argument of type '(item: string) => number' is not assignable to parameter of type 'string'. Write @logged("Cart") instead.

The older experimentalDecorators

Long before JavaScript's decorator proposal took its current shape, TypeScript had its own, based on an older draft. You turn them on with "experimentalDecorators": true in tsconfig.json. Angular and NestJS were built on these, and their projects turn the flag on. The same @logged line then calls the decorator in a different way:

1function logged(target: object, key: string, descriptor: PropertyDescriptor) {2  const method = descriptor.value;3  descriptor.value = function (this: unknown, ...args: unknown[]) {4    console.log(`${key}(${args.join(", ")})`);5    return method.apply(this, args);6  };7}8 9class Cart {10  items: string[] = [];11 12  @logged13  addItem(item: string) {14    this.items.push(item);15    return this.items.length;16  }17}18 19console.log(new Cart().addItem("Tea"));

The list under the code shows the option this example sets. Line 1 is the old signature, with three inputs: target, the class's prototype (the object its methods live on); key, the method's name; and a property descriptor, the object that holds the method in its value. Line 3 swaps the method for a wrapper by changing descriptor.value. It prints addItem(Tea), then 1.

The two kinds don't mix. Try each decorator with the flag on and off:

1function logged(value: unknown, context: ClassMethodDecoratorContext) {2  console.log(`logged ${String(context.name)}`);3}4 5class Cart {6  @logged7  addItem(item: string) {8    return 1;9  }10}11 12console.log(new Cart().addItem("Tea"));

Each decorator only works with its own setting. With the wrong one, TypeScript marks line 6, and the compiled code passes the wrong inputs: the standard decorator prints logged undefined, and the experimental one prints logged [object Object].

The old kind can do two things the standard kind can't. First, it can decorate a constructor's parameters:

1function inject(token: string) {2  return function (target: object, key: string | undefined, index: number) {3    console.log(`parameter ${index} of ${key ?? "the constructor"} needs ${token}`);4  };5}6 7class CheckoutService {8  constructor(@inject("api") api: string) {}9}

Line 8 puts @inject("api") on the constructor's api parameter. NestJS and Angular use decorators like this to say what to pass into a class. When the class is defined, it prints parameter 0 of the constructor needs api. Without the flag, the same code fails:

1function inject(token: string) {2  return function (target: object, key: string | undefined, index: number) {3    console.log(`parameter ${index} of ${key ?? "the constructor"} needs ${token}`);4  };5}6 7class CheckoutService {8  constructor(@inject("api") api: string) {}9}

Line 8 gets Decorators are not valid here: standard decorators can't go on parameters.

Second, emitDecoratorMetadata. With this option, tsc writes the types of a decorated class's constructor parameters into the compiled code, so a framework can read them while the page runs. It belongs to the old kind: tsc refuses it without experimentalDecorators, with Option 'emitDecoratorMetadata' cannot be specified without specifying option 'experimentalDecorators'.

1class ApiClient {}2 3function injectable(target: unknown) {4  console.log("injectable", (target as { name: string }).name);5}6 7@injectable8class CheckoutService {9  constructor(private api: ApiClient) {}10}

Line 9's constructor takes an ApiClient, and line 7 decorates the class. It prints injectable CheckoutService. Here is part of what tsc writes for lines 7 and 8:

CheckoutService = __decorate([
    injectable,
    __metadata("design:paramtypes", [ApiClient])
], CheckoutService);

Line 3 is the metadata: "design:paramtypes", the constructor's parameter types, is the list [ApiClient]. The type became a value in the code. NestJS reads it, with a library called reflect-metadata, to know it should create an ApiClient and pass it in.

The table below sums up the differences. Read each row as a question, then each kind's answer.

In an Angular or NestJS project, keep the setting the framework chose. For your own decorators in other projects, use the standard kind.

A cart panel built from decorators

In a real project, decorators live in a file of their own, and classes import them. Here is a decorators.ts holding three from this lesson, written with export:

1export function bound<This extends object, Args extends unknown[], Return>(2  method: (this: This, ...args: Args) => Return,3  context: ClassMethodDecoratorContext<This, (this: This, ...args: Args) => Return>,4) {5  context.addInitializer(function () {6    Reflect.set(this, context.name, method.bind(this));7  });8}9 10export function logged(prefix: string) {11  return function <This, Args extends unknown[], Return>(12    method: (this: This, ...args: Args) => Return,13    context: ClassMethodDecoratorContext<This, (this: This, ...args: Args) => Return>,14  ) {15    return function (this: This, ...args: Args): Return {16      console.log(`[${prefix}] ${String(context.name)}(${args.join(", ")})`);17      return method.call(this, ...args);18    };19  };20}21 22export function positive<This>(23  target: ClassAccessorDecoratorTarget<This, number>,24  context: ClassAccessorDecoratorContext<This, number>,25): ClassAccessorDecoratorResult<This, number> {26  return {27    set(value) {28      if (value <= 0) throw new RangeError(`${String(context.name)} must be above 0`);29      target.set.call(this, value);30    },31  };32}

Lines 1 to 8 are bound, lines 10 to 20 the logged factory, and lines 22 to 32 positive, the same code as earlier sections. A cart panel uses all three:

1import { bound, logged, positive } from "./decorators";2 3class CartPanel {4  @positive accessor quantity = 1;5 6  @bound7  @logged("CartPanel")8  addOne() {9    this.quantity += 1;10    return this.quantity;11  }12}13 14const panel = new CartPanel();15const onPlusClick = panel.addOne;16console.log(onPlusClick());17console.log(onPlusClick());18try {19  panel.quantity = -1;20} catch (error) {21  console.log((error as Error).message);22}

Line 1 imports the decorators (Modules in TypeScript covers imports). Line 4 makes quantity an auto-accessor that refuses 0 or less. Lines 6 and 7 stack two decorators on addOne: logged wraps it, then bound binds the wrapper. Line 15 copies the method, as a plus button's click listener would. Lines 16 and 17 print [CartPanel] addOne() and 2, then [CartPanel] addOne() and 3. Line 19 tries -1, and line 21 prints quantity must be above 0.

Common mix-ups

• "A decorator runs every time I call the method." No. It runs once, while the class is defined. Whatever it gives back, like a logging wrapper, is what runs on each call.
• "Decorators are a TypeScript-only feature." No. Standard decorators are a JavaScript feature that TypeScript compiles for you. The older experimentalDecorators are TypeScript's own.
• "Any decorator works anywhere." No. Each place passes its own context, and TypeScript checks that the decorator accepts it. A method decorator on a field gets an error.
• "@logged and @logged("Cart") are the same." No. With brackets you call a factory, which returns the decorator. Without them, the function itself is the decorator.
• "Angular's decorators and TypeScript 5's are the same thing." No. Angular uses experimentalDecorators, which passes different inputs, allows parameter decorators, and works with emitDecoratorMetadata.
• "A field decorator can check every value I set." No. It only sees the starting value. Use an accessor field, whose decorator can replace set.

Practice exercises

These exercises use decorators, so their code is type-checked on the page but has no Edit & run. Write your answer in your head or on paper, check it against the errors under the code, and use the hints. The lesson's tests compile each solution and check what it prints.

function trimmed<This>(value: undefined, context: ClassFieldDecoratorContext<This, string>) {
  return (initial: string) => initial.trim();
}

class SearchBox {
  @trimmed query = "  tea  ";
  @trimmed search() { return this.query; }
}

1function trimmed<This>(value: undefined, context: ClassFieldDecoratorContext<This, string>) {2  return (initial: string) => initial.trim();3}4 5class SearchBox {6  @trimmed query = "  tea  ";7  search() { return this.query; } // a method can't take a field decorator8}

1function note(label: string) {2  console.log(`make ${label}`);3  return function (method: unknown, context: ClassMethodDecoratorContext) {4    console.log(`apply ${label}`);5  };6}7 8class Cart {9  @note("A") @note("B") checkout() {}10}

1function note(label: string) {2  console.log(`make ${label}`); // runs as each @note(...) is read, top to bottom3  return function (method: unknown, context: ClassMethodDecoratorContext) {4    console.log(`apply ${label}`); // runs closest to the method first5  };6}7 8class Cart {9  @note("A") @note("B") checkout() {}10}

1function logged<This, Args extends unknown[], Return>(2  method: (this: This, ...args: Args) => Return,3  context: ClassMethodDecoratorContext<This, (this: This, ...args: Args) => Return>,4) {5  return function (this: This, ...args: Args): Return {6    console.log(`${String(context.name)}(${args.join(", ")})`);7    return method.call(this, ...args);8  };9}10 11class Cart {12  items: string[] = [];13 14  @logged15  addItem(item: string) {16    this.items.push(item);17    return this.items.length;18  }19}20 21new Cart().addItem("Tea");

1function logged(prefix: string) {2  return function <This, Args extends unknown[], Return>(3    method: (this: This, ...args: Args) => Return,4    context: ClassMethodDecoratorContext<This, (this: This, ...args: Args) => Return>,5  ) {6    return function (this: This, ...args: Args): Return {7      console.log(`[${prefix}] ${String(context.name)}(${args.join(", ")})`);8      return method.call(this, ...args);9    };10  };11}12 13class Cart {14  items: string[] = [];15 16  @logged("Cart")17  addItem(item: string) {18    this.items.push(item);19    return this.items.length;20  }21}22 23new Cart().addItem("Tea");

1function bound<This extends object, Args extends unknown[], Return>(2  method: (this: This, ...args: Args) => Return,3  context: ClassMethodDecoratorContext<This, (this: This, ...args: Args) => Return>,4) {5  context.addInitializer(function () {6    Reflect.set(this, context.name, method.bind(this));7  });8}9 10class SearchBox {11  query = "tea";12 13  handleInput() {14    console.log(`Searching for ${this.query}`);15  }16}17 18const box = new SearchBox();19const onInput = box.handleInput;20onInput();

1function bound<This extends object, Args extends unknown[], Return>(2  method: (this: This, ...args: Args) => Return,3  context: ClassMethodDecoratorContext<This, (this: This, ...args: Args) => Return>,4) {5  context.addInitializer(function () {6    Reflect.set(this, context.name, method.bind(this));7  });8}9 10class SearchBox {11  query = "tea";12 13  @bound14  handleInput() {15    console.log(`Searching for ${this.query}`);16  }17}18 19const box = new SearchBox();20const onInput = box.handleInput;21onInput();

1class ReviewForm {2  accessor comment = "";3}4 5const form = new ReviewForm();6form.comment = "Lovely tea";7try {8  form.comment = "This tea is lovely, and the cake is even better";9} catch (error) {10  console.log((error as Error).message);11}12console.log(form.comment);

1function maxLength(limit: number) {2  return function <This>(3    target: ClassAccessorDecoratorTarget<This, string>,4    context: ClassAccessorDecoratorContext<This, string>,5  ): ClassAccessorDecoratorResult<This, string> {6    return {7      set(value) {8        if (value.length > limit) throw new RangeError(`${String(context.name)} is longer than ${limit}`);9        target.set.call(this, value);10      },11    };12  };13}14 15class ReviewForm {16  @maxLength(20) accessor comment = "";17}18 19const form = new ReviewForm();20form.comment = "Lovely tea";21try {22  form.comment = "This tea is lovely, and the cake is even better";23} catch (error) {24  console.log((error as Error).message);25}26console.log(form.comment);

1function logged(target: object, key: string, descriptor: PropertyDescriptor) {2  const method = descriptor.value;3  descriptor.value = function (this: unknown, ...args: unknown[]) {4    console.log(`${key}(${args.join(", ")})`);5    return method.apply(this, args);6  };7}8 9class Cart {10  items: string[] = [];11 12  @logged13  addItem(item: string) {14    this.items.push(item);15    return this.items.length;16  }17}18 19console.log(new Cart().addItem("Tea"));

1function logged<This, Args extends unknown[], Return>(2  method: (this: This, ...args: Args) => Return,3  context: ClassMethodDecoratorContext<This, (this: This, ...args: Args) => Return>,4) {5  return function (this: This, ...args: Args): Return {6    console.log(`${String(context.name)}(${args.join(", ")})`);7    return method.call(this, ...args);8  };9}10 11class Cart {12  items: string[] = [];13 14  @logged15  addItem(item: string) {16    this.items.push(item);17    return this.items.length;18  }19}20 21console.log(new Cart().addItem("Tea"));

Check your understanding

For each question, ask two things: when the decorator runs, and what it gets. The quiz shows its code without the checker, so the error list doesn't give the answers away.

Key takeaways

• A decorator is a function you put on a class or a member with @. It runs once, while the class is defined.
• A standard decorator gets (value, context). Each place has its own context type, like ClassMethodDecoratorContext.
• Typed with generics, a decorator keeps the method's types, and TypeScript marks it in the wrong place or on the wrong kind of method.
• addInitializer runs setup for each new object, which is how @bound keeps this in event handlers.
• Field decorators change the starting value; accessor decorators can check every value set.
• A factory, like @register("cart-badge"), is called to make the decorator.
• experimentalDecorators, used by Angular and NestJS, passes different inputs, allows parameter decorators, and is the only kind that works with emitDecoratorMetadata.

Coming next: Migrating JavaScript to TypeScript. It moves a real project from JavaScript to TypeScript one file at a time, without stopping the team.