Search code examples
javascriptreactjstypescripteslinttypescript-eslint

@typescript-eslint/no-unused-vars false positive in type declarations


I am having a problem with @typescript-eslint/no-unused-vars. I have:

type SomeType = (name: string) => void;

but I get a @typescript-eslint/no-unused-vars error in the string with type declaration:

'name' is defined but never used

Example of type usage:

export const LogSomeInfo: SomeType = (name: string) => {
    const a = name;
    console.log(a);
};

or:

interface CheckboxPropsType {
    value: string,
    onClick(value: string): void
}

and eslint breaks at onClick... string, saying:

value is defined but never used.

This occurs even if the type is assigned correctly and the actual onClick handler uses the value.

What's wrong with this rule and why is it triggered in this case? Why does eslint recognize type declaration for functions in types/interfaces as regular functions? Is it a problem with my eslint config?

"eslint": "^7.7.0", "@typescript-eslint/eslint-plugin": "^3.6.1", "@typescript-eslint/parser": "^4.0.1", "eslint-config-airbnb-typescript": "^9.0.0",

{
  "extends": [
    "airbnb-typescript",
    "airbnb/hooks",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 2018,
    "sourceType": "module",
    "project": "./tsconfig.json"
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "plugins": ["@typescript-eslint", "react-hooks", "react"],
  "env": {
    "browser": true
  },
  "rules": {
    "object-curly-newline": 0,
    "import/named": ["error"],
    "indent": ["error", 4],
    "react/jsx-indent": ["error", 4],
    "comma-dangle": ["error", "never"],
    "import/prefer-default-export": "off",
    "react/jsx-fragments": "off",
    "arrow-body-style": "off",
    "object-curly-spacing": "off",
    "@typescript-eslint/indent": ["error", 4, {"SwitchCase": 1}],
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "no-undef": "error",
    "react/jsx-indent-props": ["error", 4],
    "max-len": ["error", { "code": 120 }],
    "react/prop-types": "off"
  }
}

Solution

  • Similar question asked earlier check: Why ESLint throws 'no-unused-vars' for TypeScript interface?

    Disable '@typescript-eslint/no-unused-vars': 0 rule and instead use "strict": true, "noUnusedLocals": true, and "noUnusedParameters": true, in tsconfig.json