StyledComponents + Typescript

Question

我在react app + typescript中遇到了奇怪的eslint问题。我正在使用样式化的组件，我需要为我的组件创建自定义的道具接口，我遵循了文档，当我像在文档中编写示例时，我得到了这个eslint错误？有人知道这是怎么回事吗？

*eslint gives error here StyledMenuButtonProps is defined but never used*
interface StyledMenuButtonProps {
  opened: boolean;
}

*and here the error is StyledMenuButtonProps is not defined*
const StyledMenuButtonWrapper = styled.div<StyledMenuButtonProps>`
  width: 40px;
  height: 20px;
  position: relative;
  margin: 0 20px;

我的.eslintrc.js文件：

module.exports = {
  env: {
    browser: true,
    es2020: true,
  },
  extends: ['plugin:react/recommended', 'airbnb', 'prettier'],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 2020,
    sourceType: 'module',
  },
  plugins: ['react', '@typescript-eslint', 'prettier'],
  rules: {
    'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx', '.ts', '.tsx'] }],
    'react/prop-types': 'off',
    'no-unused-vars': 2,
    '@typescript-eslint/ban-types': 'off',
    '@typescript-eslint/explicit-function-return-type': [0],
    'no-use-before-define': 'off',
    'import/prefer-default-export': 'off',
    'import/no-default-export': 'error',
    'import/no-unresolved': 'off',
    'import/extensions': 'off',
    'consistent-return': 'off',
  },
  settings: {
    react: {
      version: 'detect',
    },
    'import/resolver': {
      node: {
        extensions: ['.ts', '.tsx', '.js', '.jsx'],
      },
    },
  },
};

用于eslint的devDependencies：

"@typescript-eslint/eslint-plugin": "^4.17.0",
"@typescript-eslint/parser": "^4.17.0",
"eslint": "^7.21.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-prettier": "^8.1.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-react-hooks": "^4.2.0",

使用最新的CRA和React脚本。

谢谢

Answer 1

例如，这里回答了这个问题：https://stackoverflow.com/a/55439681/10490197 :)

基本上，您使用的规则无法正确理解TypeScript，因此您需要使用以下命令来修复它：

"rules": {
  "no-unused-vars": "off",
  "@typescript-eslint/no-unused-vars": "error"
}