bind-decorator

What is bind-decorator?

The bind-decorator npm package provides a simple way to bind class methods to the instance of the class. This is particularly useful in JavaScript and TypeScript when dealing with event handlers or callbacks where the context of 'this' can be lost.

What are bind-decorator's main functionalities?

Method Binding

This feature allows you to bind a class method to the instance of the class using the @bind decorator. This ensures that the method retains the correct 'this' context when called.

class MyClass {
  constructor() {
    this.value = 42;
  }

  @bind
  printValue() {
    console.log(this.value);
  }
}

const instance = new MyClass();
const print = instance.printValue;
print(); // Outputs: 42

Other packages similar to bind-decorator

autobind-decorator

The autobind-decorator package provides similar functionality by automatically binding methods to the instance of the class. It is also used as a decorator and serves the same purpose of maintaining the correct 'this' context in methods.

core-decorators

The core-decorators package offers a collection of decorators, including @autobind, which binds methods to the instance of the class. It provides additional decorators for other common patterns, making it a more comprehensive solution.

README

bind-decorator

Context method binding decorator.

@bind is just a little faster version of @autobind for decorating methods only, by binding them to the current context. It is written in TypeScript and follows the latest decorators purposal.

• It will throw exceptions if decorating anything other than function;
• Since the implementation follows the latest decorators purposal where compartion betweeen this and target can not be trusted, @bind will always return a configurable, get accessor propertyDescriptor which will memomize the result of descriptor.value.bind(this) by re-defining the property descriptor of the method beeing decorated (Credits goes to autobind-decorator for memoizing the result).

If you are looking for not just method decorator but rather full class bounding decorator check @autobind.

Install

Usage

In JavaScript

import bind from 'bind-decorator';

class Test {
    static what = 'static';
    
    @bind
    static test() {
        console.log(this.what);
    }

    constructor(what) {
        this.what = what;
    }

    @bind
    test() {
        console.warn(this.what);
    }
}

const tester = new Test('bind');
const { test } = tester;
tester.test(); // warns 'bind'.
test(); // warns 'bind'.
Test.test(); // logs 'static'.

In TypeScript

import bind from 'bind-decorator';

class Test {
    public static what: string = 'static';
    
    @bind
    public static test(): void {
        console.log(this.what);
    }

    public constructor(public what: string) {
        this.what = what;
    }

    @bind
    public test(): void {
        console.warn(this.what);
    }
}

const tester: Test = new Test('bind');
const { test } = tester;
tester.test(); // warns 'bind'.
test(); // warns 'bind'.
Test.test(); // logs 'static'.

Testing

1. npm install

2. npm test

Contributing

1. npm install

2. npm run typings

3. Make changes

4. If necessary add some tests to __tests__

5. npm test

6. Make a Pull Request