How do you check for prop errors in a React/Typescript project with ESLint?

Question

I am in the process of migrating a create-react-app Typescript project to the latest version of create-react-app, and with it I am moving from the now deprecated tslint to eslint. The issue I am having with this transition is that I cannot get eslint to throw either an error or a warning on missing props.

Take this sample React component:

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

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

export default ExampleComponent;

that is then later called by another component:

import ExampleComponent from './ExampleComponent';

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

In the above example, the count prop is missing. This should result in an error or warning thrown by eslint, as it previously did with tslint. My IDE recognizes the missing prop and will highlight it, however I can still compile the code successfully, which it should not be doing.

How can I modify my eslint configuration in order to get an error whenever a prop is missing (or in the same sense, if an extra prop that shouldn't be there is there)?

Here is my .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"
    }
};

And below is my tsconfig.json file:

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

You don't need ESLint to throw an error on that - TypeScript itself will fail to compile. Intellisense will also show you the issue in your IDE. — Dean James
My IDE is performing correctly and highlighting the error. However TypeScript compiles with no errors, both in development and when I build production. My IDE alone isn't enough, as it only shows the error if I am currently looking at the file. I have edited the question and attached my tsconfig.json as well — Kyle Soeltz

Kyle Soeltz Kyle Soeltz · Accepted Answer · 2020-12-21T01:16:00

The issue is not a problem with ESLint not catching the error, but rather in the migration process to the newest version of create-react-app. Updating react-scripts (to version 4.0.1 at the time of writing this) does not also update the TypeScript version. The difference versions causes a number of errors not being properly reported. Updating Typescript to version 4.0.3 fixes the problem.

How do you check for prop errors in a React/Typescript project with ESLint?

1 Answers