メインコンテンツにスキップ

no-this-alias

this のエイリアスを禁止します。

✅

拡張 "plugin:@typescript-eslint/recommended" を ESLint構成 で有効にすると、このルールが有効になります。

アローラムダを適切に使用する代わりに、this に変数を代入することは、ES6以前のプラクティスやスコープの管理が適切でないことの兆候である可能性があります。

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

Playgroundでこのルールを試す ↗

例​

const self = this;

setTimeout(function () {
  self.doWork();
});
Playgroundで開く

オプション​

このルールは、以下のオプションを受け入れます

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​

クラスのインスタンスからプロパティをデストラクトすることが便利な場合があります。例えば、インスタンスのメソッドの1つで複数のプロパティを取得する場合です。allowDestructuring は、これらのデストラクトを許可し、デフォルトで true になっています。allowDestructuring を false に設定することで、明示的に禁止することができます。

{ "allowDestructuring": false } オプションのコード例

class ComponentLike {
  props: unknown;
  state: unknown;

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

    console.log(props);
    console.log(state);
  }
}
Playgroundで開く

allowedNames​

no-this-alias は、this エイリアスとして特定の名前のリストのみを許可するために使用することもできます。すべてのルール違反を修正するための一時的なステップを除き、これを使用することはお勧めしません。

{ "allowedNames": ["self"] } オプションのコード例

class Example {
  method() {
    const that = this;
  }
}
Playgroundで開く

いつ使用しないか​

プロジェクトが this を変数に代入する必要があるような構造になっている場合、このルールはおそらくあなたには向いていません。プロジェクトの一部のみが this を変数に代入している場合は、このルールを完全に無効にするのではなく、特定の状況に対してESLintの無効化コメントを使用することを検討してください。

リソース​