2021-07-21
1611
#vanilla javascript
Lawrence Eagles
58810
Jul 21, 2021 â‹… 5 min read

Understanding JavaScript decorators

Lawrence Eagles Senior full-stack developer, writer, and instructor.

Recent posts:

Implementing React Islands In Static Web Applications

Implementing React Islands in static web applications

React Islands integrates React into legacy codebases, enabling modernization without requiring a complete rewrite.

Nelson Michael
Jan 28, 2025 â‹… 4 min read

Onlook: A React visual editor

Onlook bridges design and development, integrating design tools into IDEs for seamless collaboration and faster workflows.

Jude Miracle
Jan 27, 2025 â‹… 8 min read
A Comprehensive Guide To JavaScript Generators

A comprehensive guide to JavaScript generators

JavaScript generators offer a powerful and often overlooked way to handle asynchronous operations, manage state, and process data streams.

Fimber Elemuwa
Jan 24, 2025 â‹… 8 min read
​​Solving Micro-Frontend Challenges With Module Federation

​​Solving micro-frontend challenges with Module Federation

webpack’s Module Federation allows you to easily share code and dependencies between applications, helpful in micro-frontend architecture.

Peter Aideloje
Jan 23, 2025 â‹… 7 min read
View all posts

5 Replies to "Understanding JavaScript decorators"

  1. Error in code there
    “Let’s learn about this by rewriting our log decorator:

    function log(target, name, descriptor) {
    if (typeof original === ‘function’) { <—– what is "original" ?

  2. The @log class method example is completely wrong and needs to be updated. The log function receives 3 arguments: the target object, the name of the target class member and a descriptor, an object containing the implementation of the class member.

    1. Hello A, it is important to note that the decorator API has evolved. You seem to refer to the stage 2 API. Below is the updated shape of the current sage 3 API in TypeScript:

      type Decorator = (value: Input, context: {
      kind: string;
      name: string | symbol;
      access: {
      get?(): unknown;
      set?(value: unknown): void;
      };
      private?: boolean;
      static?: boolean;
      addInitializer?(initializer: () => void): void;
      }) => Output | void;

      Checkout https://github.com/tc39/proposal-decorators for more.

Leave a Reply