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.
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
If you are using React, and you want to define type Props = {}. This is technically safe in this instance, because under the hood the {} type is passed into an intersection type (see the note at the end of this comment for why this is safe). explains why this is safe to do in react. I'm not sure you want to turn this off everywhere. @Iboyel answer seems more accurate.I strongly disagree that the chosen answer is correct. This warning exists for a reason; for anyone Googling it, I'll leave it as what ESLint says:
- If you want a type meaning "any object", you probably want
Record<string, unknown>instead.- If you want a type meaning "any value", you probably want
unknowninstead.- If you want a type meaning "empty object", you probably want
Record<string, never>instead.
Expanding on Jordan answer to apply this rule to only React components in the .eslintrc.js file add
overrides: [
{
// Apply rule override only to files with the following extensions
files: ['*.tsx', '*.jsx'],
rules: {
'@typescript-eslint/ban-types': [
'error',
{
extendDefaults: true,
types: {
'{}': false,
},
},
],
},
},
]
{[k: string | number | symbol]: never} work in place of {} ?
ts files. So ['*.ts', '*.tsx'] seems more correct to me.
unknowndo? Or may be evennever