禁止 this 别名

禁止为 this 创建别名。

✅

在 "plugin:@typescript-eslint/recommended" 的 ESLint 配置文件 中扩展该规则。

将变量赋值给this而不是正确使用箭头函数可能是 ES6 之前实践的症状，或者没有很好地管理作用域。

.eslintrc.cjs

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

在游乐场中尝试此规则 ↗

示例

❌ 错误

const self = this;

setTimeout(function () {
  self.doWork();
});

在游乐场中打开

✅ 正确

setTimeout(() => {
  this.doWork();
});

在游乐场中打开

选项

此规则接受以下选项

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

有时从类实例中解构属性可能很有用，例如在类实例的方法之一中从实例中检索多个属性。allowDestructuring 允许这些解构，默认情况下为 true。您可以通过将 allowDestructuring 设置为 false 来显式禁止它们。

{ "allowDestructuring": false } 选项的代码示例

❌ 错误

class ComponentLike {
  props: unknown;
  state: unknown;

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

    console.log(props);
    console.log(state);
  }
}

在游乐场中打开

✅ 正确

class ComponentLike {
  props: unknown;
  state: unknown;

  render() {
    console.log(this.props);
    console.log(this.state);
  }
}

在游乐场中打开

allowedNames

no-this-alias 可以用来只允许特定名称列表作为 this 别名。我们建议不要这样做，除非作为修复所有规则违规的过渡步骤。

{ "allowedNames": ["self"] } 选项的代码示例

❌ 错误

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

在游乐场中打开

✅ 正确

class Example {
  method() {
    const self = this;
  }
}

在游乐场中打开

何时不使用它

如果您的项目结构需要将 this 赋值给变量，则此规则可能不适合您。如果只有项目的一部分将 this 赋值给变量，那么您可能需要考虑使用ESLint 禁用注释 针对这些特定情况，而不是完全禁用此规则。

资源

• 规则来源
• 测试来源