Skip to main content

no-this-alias

Disallow aliasing this.

Assigning a variable to this instead of properly using arrow lambdas may be a symptom of pre-ES6 practices or not managing scope well.

.eslintrc.cjs
module.exports = {
"rules": {
"@typescript-eslint/no-this-alias": "error"
}
};

Try this rule in the playground ↗

Examples

const self = this;

setTimeout(function () {
self.doWork();
});
Open in Playground

Options

This rule accepts the following options:

type Options = [
{
/** Whether to ignore destructurings, such as `const { props, state } = this`. */
allowDestructuring?: boolean;
/** Names to ignore, such as ["self"] for `const self = this;`. */
allowedNames?: string[];
},
];

const defaultOptions: Options = [
{ allowDestructuring: true, allowedNames: [] },
];

allowDestructuring

It can sometimes be useful to destructure properties from a class instance, such as retrieving multiple properties from the instance in one of its methods. allowDestructuring allows those destructures and is true by default. You can explicitly disallow them by setting allowDestructuring to false.

Examples of code for the { "allowDestructuring": false } option:

class ComponentLike {
props: unknown;
state: unknown;

render() {
const { props, state } = this;

console.log(props);
console.log(state);
}
}
Open in Playground

allowedNames

no-this-alias can alternately be used to allow only a specific list of names as this aliases. We recommend against this except as a transitory step towards fixing all rule violations.

Examples of code for the { "allowedNames": ["self"] } option:

class Example {
method() {
const that = this;
}
}
Open in Playground

When Not To Use It

If your project is structured in a way that it needs to assign this to variables, this rule is likely not for you. If only a subset of your project assigns this to variables then you might consider using ESLint disable comments for those specific situations instead of completely disabling this rule.

Resources