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

user_7837405 0
Viewed 24935

There is one problem with @typescript-eslint/no-unused-vars. So, we have type

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

And we have @typescript-eslint/no-unused-vars error in string with type declaration, which says '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 that value is defined but never used. Even if type assigned correctly and actual onClick handler uses the value!

Question: What's wrong with this rule and why it triggers in this case. Why eslint recognizes type declaration for functions in types/interfaces as regular function? It's 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"
  }
}
typescript-eslint eslint typescript reactjs javascript
4 Answers

Source: I am the maintainer of the typescript-eslint project.

If you update your versions of @typescript-eslint/parser and @typescript-eslint/eslint-plugin to v4.1.0, you will be able to use the latest changes which make @typescript-eslint/no-unused-vars work properly for all cases.

As an aside - using v3.x of the plugin but v4.x of the parser will put you into a really weird state with undefined and unsupported behaviour.

You should make sure you are always using the same version of both packages, as each version is released together.

user_37360510
user_101026950

Just make sure you have the latest version of the following:

  • typescript-eslint
  • @typescript-eslint/parser
  • @typescript-eslint/eslint-plugin

in your .eslintrc.js make sure you have the following lines added to rules section:

  "no-unused-vars": "off",
  "@typescript-eslint/no-unused-vars": ["error"]
user_56717670

Another option to fix this is to add typescript-eslint to your extends and remove it from plugins:

extends: [
  `plugin:@typescript-eslint/recommended',
]

You can then also remove parser: @typescript-eslint/parser since by extending it, the plugin will handle all of this for you under the hood. You can still override some rules if needed:

  rules: {
    '@typescript-eslint/no-unused-vars': ['off'],
  },
user_34729350
Related