如何使用 ESLint 检查 React/Typescript 项目中的 prop 错误？

Question

我正在将 create-react-app Typescript 项目迁移到最新版本的 create-react-app，并且我正在从现已弃用的 tslint 迁移到 eslint。我在此过渡中遇到的问题是，我无法让 eslint 对缺少的道具抛出错误或警告。

以这个 React 组件为例：

interface Props {
  name: string;
  count: number;
}

const ExampleComponent = (props: Props) => {
  const {name, count} = props;
  return (
    <div>
      {name} {count}
    </div>
  );
}

export default ExampleComponent;

然后被另一个组件调用：

import ExampleComponent from './ExampleComponent';

const App = (props: Props) => {
  return (
    <ExampleComponent count={5} />
  );
}

在上面的示例中，缺少 count 属性。这应该会导致 eslint 抛出错误或警告，就像之前对 tslint 所做的那样。我的 IDE 识别出缺少的道具并将其突出显示，但是我仍然可以成功编译代码，这是不应该的。

如何修改我的 eslint 配置，以便在缺少道具时（或者在同样的意义上，如果存在不应该存在的额外道具）出现错误？

这是我的.eslintrc.js：

module.exports = {
    "env": {
        "browser": true,
        "node": true
    },
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "project": "tsconfig.json",
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "plugins": [
        "eslint-plugin-jsdoc",
        "eslint-plugin-prefer-arrow",
        "eslint-plugin-import",
        "eslint-plugin-react",
        "@typescript-eslint",
        "@typescript-eslint/tslint"
    ],
    "extends": [
      "eslint:recommended",
      "plugin:@typescript-eslint/recommended",
      "plugin:react/recommended",
      ],
    "rules": {
        "@typescript-eslint/no-inferrable-types": "off",
        "react/no-unescaped-entities": "off",
        "@typescript-eslint/no-var-requires": "off",
        "@typescript-eslint/no-explicit-any": "off",
        "@typescript-eslint/explicit-module-boundary-types": "off",
        "jsdoc/require-jsdoc": "off",
        "@typescript-eslint/no-unused-vars": "off",
        "max-len": ["error", 200, 2, {
          "ignoreUrls": true,
          "ignoreComments": true,
          "ignoreRegExpLiterals": true,
          "ignoreStrings": true,
          "ignoreTemplateLiterals": true
        }],
        "no-prototype-builtins": "off"
    }
};

下面是我的tsconfig.json 文件：

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "strictFunctionTypes": false,
    "allowUnreachableCode": false,
    "allowUnusedLabels": false,
    "allowJs": true,
    "skipLibCheck": true,
    "noEmitHelpers": false,
    "noUnusedLocals": true,
    "removeComments": false,
    "preserveConstEnums": false,
    "sourceMap": true,
    "importHelpers": true,
    "noFallthroughCasesInSwitch": true,
    "noUnusedParameters": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src"
  ],
  "exclude": [
    "build",
    "node_modules",
    "src/setupProxy.js",
    "archived"
  ]
}

Answer 1

问题不是 ESLint 没有捕捉到错误的问题，而是在迁移到最新版本的 create-react-app 的过程中。更新 react-scripts（在撰写本文时为 4.0.1 版）不会同时更新 TypeScript 版本。不同的版本会导致一些错误没有被正确报告。将 Typescript 更新到 4.0.3 版可以解决问题。