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

我正在将create-react-app-Typescript项目迁移到create-react-app的最新版本，并使用它从现在不推荐的tslint迁移到eslint。我在这次转换中遇到的问题是，我无法让eslint对丢失的道具抛出错误或警告

取以下反应组件的样本：

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} />
  );
}

下面是我的

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"
  ]
}

---

问题不在于ESLint没有捕获错误，而在于迁移到最新版本的create react app的过程中。更新

react scripts

（在撰写本文时更新到4.0.1版）也不会更新TypeScript版本。不同版本会导致许多错误无法正确报告。将Typescript更新到4.0.3版可以解决此问题。

您不需要ESLint在该版本上抛出错误-Typescript本身将无法编译。Intellisense还将向您显示IDE中的问题。我的IDE正在正确执行并突出显示错误。然而，无论是在开发中还是在构建产品时，TypeScript编译都没有错误。仅凭我的IDE是不够的，因为它只在我当前查看文件时显示错误。我已经编辑了这个问题并附上了我的tsconfig.json。你能详细介绍一下到底发生了什么吗？我已经能够在codesandbox上复制您的问题，但是启动一个新的CRA项目并不像预期的那样编译。我启动了一个新的CRA项目，以查看是否也有不同之处，并且有同样的经验，它没有像预期的那样编译。比较两个package.json文件后，我的项目运行的是TS 3.5.x，而最新的CRA项目运行的是4.0.3。升级项目以匹配后，错误再次出现。另外值得注意的是，我最初将TS升级到了4.1.x，但有许多与jsx相关的错误尚未在该版本中修补，因此我回滚到了4.0.3完善版，次要版本之间的差异也是我所经历的。谢谢你花时间解释！

{
  "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"
  ]
}