False positive "(ESLint) no-invalid-this" in class property method

[LukeOwlclaw]

Tell us about your environment

• ESLint Version: v7.25.0
• Node Version: v12.20.1
• npm Version: v6.14.11
• Operating System: win32 10.0.19042

What parser (default, @babel/eslint-parser, @typescript-eslint/parser, etc.) are you using?

"@typescript-eslint/parser": "4.22.0",
"@typescript-eslint/eslint-plugin": "4.22.0",

What did you do? Please include the actual source code causing the issue, as well as the command that you used to run ESLint.

file.ts:

class TestClass {
    private mText: string = "test";

    public Baz = (): void => {
        console.log(this.mText); // (ESLint) no-invalid-this	Unexpected 'this'.
    }

    public Foo(): void {
        console.log(this.mText);
    }
}

const t = new TestClass();
t.Foo();
t.Baz();

ESLint rule:
"no-invalid-this": "error"

Run:

eslint file.ts

What did you expect to happen?

No errors.

What actually happened? Please copy-paste the actual, raw output from ESLint.

file.ts
  5:21  error  Unexpected 'this'  no-invalid-this

✖ 1 problem (1 error, 0 warnings)

Steps to reproduce this issue:

1. Create file.ts as shown above
2. Run eslint file.ts applying rule "no-invalid-this": "error"

[ljharb]

Class fields only recently gained stage 4, so eslint doesn't support them yet (see #14343).

(Separately, arrow functions in a class field are almost always a bad idea, and there's nothing in this example that suggests Baz should be an arrow function)

[mdjermanovic]

Hi @LukeOwlclaw, thanks for the issue!

This rule will be updated as a part of #14343, so I'm closing this issue as a duplicate.

In the meantime, you can use a replacement rule @typescript-eslint/no-invalid-this from @typescript-eslint/eslint-plugin:

{  
  "no-invalid-this": "off",
  "@typescript-eslint/no-invalid-this": ["error"]
}