如何使用 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 可解決此問題。