Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React using TypeScript, Don't use {} as a type. {

I am getting an ESlint error Don't use `{}` as a type. `{}` actually means "any non-nullish value". in my Contact component whiling using React and TypeScript.

The component doesn't have any props.

export default class Contact extends React.Component<{}, MyState> {
    constructor(props = {}) {
        super(props);
        this.state = {
            signedUp: false,
        };
    }
}

I tried using null instead, but that threw other ESLint errors.

like image 726
Jordan Schnur Avatar asked Dec 18 '22 11:12

Jordan Schnur


1 Answers

After a lot of digging I found the following GitHub issues.

By adding the following to your .eslintrc.js you are able to ignore the rule. It is recommended to use Configurations to have this rule only apply to React components. This will ensure strong typing everywhere else.

  "rules": {
    "@typescript-eslint/ban-types": [
      "error",
      {
        "extendDefaults": true,
        "types": {
          "{}": false
        }
      }
    ]
  }
}

Source: https://github.com/typescript-eslint/typescript-eslint/issues/2063#issuecomment-675156492

like image 101
Jordan Schnur Avatar answered Feb 16 '23 02:02

Jordan Schnur