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

Question

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.

Answer 1

Expanding on Jordan answer to apply this rule to only React components in the .eslintrc.js file add

overrides: [
    {
        files: ['*.tsx, *.jsx'],
        rules: {
            '@typescript-eslint/ban-types': [
                'error',
                {
                    extendDefaults: true,
                    types: {
                        '{}': false,
                    },
                },
            ],
        },
    },
]