Getting no-unused-vars on constructor parameters after upgrading to the latest version of typescript and eslint

[SamiSammour]

• I have tried restarting my IDE and the issue persists.
• I have updated to the latest version of the packages.
• I have read the FAQ and my problem is not listed.

I have an issue after I upgraded to the latest version of TypeScript, ESLint & @typescript-eslint/eslint-plugin I didn't have it before upgrading.
Now every time I execute the lint command I get a list of no-unused-vars errors for used imports & constructor properties, also issues in enums. All of these problem didn't exist before the upgrade.
The versions I had before the upgrade are:

package	version
@typescript-eslint/eslint-plugin	3.7.1
@typescript-eslint/parser	3.7.1
TypeScript	3.9.7
node	14.15.0
npm	6.14.8

Repro
Here's my files I'm using:

.eslintrc

{
  "settings": {
    "import/parsers": {
      "@typescript-eslint/parser": [
        ".ts"
      ]
    }
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": "tsconfig.json",
    "sourceType": "module"
  },
  "plugins": [
    "@typescript-eslint/eslint-plugin"
  ],
  "extends": [
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:import/typescript",
    "airbnb-base"
  ],
  "root": true,
  "env": {
    "node": true,
    "jest": true
  },
  "rules": {
    "no-trailing-spaces": "error",
    "comma-dangle": [
      "error",
      "never"
    ],
    "import/no-extraneous-dependencies": "off",
    "import/no-unresolved": "off",
    "class-methods-use-this": "off",
    "import/extensions": "off",
    "no-empty-function": [
      "error",
      {
        "allow": [
          "constructors"
        ]
      }
    ],
    "no-useless-constructor": "off",
    "brace-style": [
      "error",
      "stroustrup",
      {
        "allowSingleLine": true
      }
    ],
    "max-len": [
      "error",
      {
        "code": 150
      }
    ],
    "no-undef": "off"
  }
}

calendar.contorller.ts

import {
  Controller, Get, Query
} from '@nestjs/common';
import { GetUser } from '@alphaapps/nestjs-common';
import CalendarService from './calendar.service';
import User from '../users/user.model';
import BookingHistoryResponseDto from './dtos/booking-history-response.dto';

@Controller('calendar')
export default class CalendarController {
  constructor(private service: CalendarService) {}
  @Get('schedule')
  async getSchedule(@Query('date') date: string, @GetUser() user: User): Promise<{ events: BookingHistoryResponseDto[] }> {
    return {
      events: await this.service.getSchedule(date, user)
    };
  }
}

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "declaration": true,
    "removeComments": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "target": "es2017",
    "sourceMap": true,
    "outDir": "./dist",
    "baseUrl": "./",
    "incremental": true,
    "esModuleInterop": true
  },
  "exclude": ["node_modules", "dist"]
}

Expected Result
I expect not to have any error.

Actual Result

src/calendar.controller.ts
   7:8   error    'BookingHistoryResponseDto' is defined but never used  no-unused-vars
   7:8   warning  'BookingHistoryResponseDto' is defined but never used  @typescript-eslint/no-unused-vars
  11:23  error    'service' is defined but never used                    no-unused-vars

A you see in the code I shared BookingHistoryResponseDto is used in the return type of the function getSchedule.
also the service parameter is initialized implicitly and should not raise this error.
Additional Info
this is the command I'm running eslint "{src,apps,libs,test}/**/*.ts" --fix

Versions

package	version
@typescript-eslint/eslint-plugin	4.14.0
@typescript-eslint/parser	4.14.0
@typescript-eslint/typescript-estree	4.14.0
@typescript-eslint/experimental-utils	4.14.0
TypeScript	4.1.3
node	14.15.0
npm	6.14.8

[gavrashenko]

I have the similar issue with random eslint problems after upgrade, including you described.

error: 'components' is not defined (no-undef) at src/pages/text-page/TextPage.vue:11:3:
   9 | 
  10 | @Component({
> 11 |   components: { TextPageModal },
     |   ^
  12 | })

I have found out that the problem is in @typescript-eslint/parser@4.14.0. If you downgrade @typescript-eslint/parser to 4.13.0, everything will be okay again.

I think this is a bug in a parser which can be discovered in code with decorators.

[SamiSammour]

@gavrashenko Yeah I had the same problem too but turning it off as this point in FAQ suggested fixed the issue.

We strongly recommend that you do not use the no-undef lint rule on TypeScript projects. The checks it provides are already provided by TypeScript without the need for configuration - TypeScript just does this significantly better.

[bradzacher]

Please, please, please use the search for open AND closed issues. This issue has been fixed, and has been raised about 10 times over the last week.

[SamiSammour]

@bradzacher I can feel the frustration you have but believe me I've searched the issues and the FAQs but I couldn't find any..
Can you just please give us the link on how I can solve this issue??

[bradzacher]

I've searched the issues but I couldn't find any

https://github.com/typescript-eslint/typescript-eslint/issues?q=is%3Aclosed+no-unused-vars+sort%3Acreated-desc

The first 9 issues in this search for the phrase "no-unused-vars" are from the past 7 days.
7/9 of these issues are relevant (1 is irrelevant, and 1 is this issue).

#2946, #2947, #2950, #2957, #2961, #2967, #2969
In the closing comment on most of these is a link to the fix PR #2943.

[fbaba-nibtravel]

The #2943 did not fix the issue for me. Still seeing exactly the same behaviour as before described at #2967

[bradzacher]

#2972