@typescript-eslint/no-this-alias

const self = this is a way to reach the outer this from a function callback, which has its own this. An arrow function doesn't, so inside it this is still the outer one. With an arrow function you don't need the extra variable, and nobody can mix up self and this.

This rule is on by default in TypeScript files.

Configure

On by default as a warning. To turn it off:

[lint.rules]
"@typescript-eslint/no-this-alias" = "off" # or "error"

Every option, set to its default:

[lint.rules]
"@typescript-eslint/no-this-alias" = ["warn", {
  allowDestructuring = true,
  allowedNames = [], # list of strings
}]

Examples

Reported:

class Timer {
  seconds = 0;

  start() {
    const self = this;
    setInterval(function () {
      self.seconds++;
    }, 1000);
  }
}

Not reported:

class Timer {
  seconds = 0;

  start() {
    setInterval(() => {
      this.seconds++;
    }, 1000);
  }
}

Options

Option	Default	What it does
allowDestructuring	true	Allow taking properties out of this: const { seconds } = this.
allowedNames	[]	Names of variables that may hold this.

Reported with allowDestructuring: false:

class Timer {
  seconds = 0;

  report() {
    const { seconds } = this;
    return `${seconds}s`;
  }
}

With allowedNames: ["self"], only that is reported:

class Timer {
  start() {
    const self = this;
    const that = this;
    return [self, that];
  }
}