Please add '@typescript-eslint/no-non-null-assertion': 'off' to your config file like below.
module.exports = {
...
rules: {
...
'@typescript-eslint/no-non-null-assertion': 'off'
},
...
}
Please add '@typescript-eslint/no-non-null-assertion': 'off' to your config file like below.
module.exports = {
...
rules: {
...
'@typescript-eslint/no-non-null-assertion': 'off'
},
...
}
If you're attempting to disable a rule on the entire file, adding this comment in the file top to ignore will work:
/* eslint-disable @typescript-eslint/no-non-null-assertion */
If you're attempting to disable a rule on the next line only (rather than for an entire file), adding this comment directly above the line to ignore will work:
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
Been new to TS and having only tried it long ago, I'm confused about some things.
I have a simple html page where I'm getting 2 elements from it, a button and a div, so I did:
const BUTTON: HTMLButtonElement | null = document.querySelector("#get");
const DATA: HTMLDivElement | null = document.querySelector("#data");Everything looks good so far, even when I know those wont be null, they could be for whatever reson I guess.
Then I have a listener so when the button is clicked I change the content on the div.
BUTTON?.addEventListener("click", async () => {
DATA ? DATA.textContent = "WORLD" : "";
}); I understand the need of using ? after BUTTON (Seams reasonable) but the part I bet I'm doing wrong is that DATA ? line... Is that what I need to write to have TS not complain about my code?
DATA.textContent = "WORLD";
Object is possibly "null"
First my mind though... Ok you may be null so:
DATA?.textContent = "WORLD";
That gives me The left-hand side of an assignment expression may not be an optional property access.
Then I remember I saw somewhere the ! for those cases.
DATA!.textContent = "WORLD";
And while I believe that's the "solution" I get a warning from eslint this time Forbidden non-null assertion.
Even then if DATA is null, code will throw an error, while my first piece of code wont.
What's the way to go here?
Why do you want to use the "non-null assertion operator"?
The status property can either be string | undefined.
What about passing an empty string or perhaps assigning a default value when you don't want to specify a value for status?
<Items status={status || ''}/>
Or:
type ItemProps = {
status?: string;
};
const Items: React.FC<ItemProps> = ({ status = 'statusDefaultValue' }) => <div>Some JSX</div>
It's a bit hard for me to understand your case without knowing the context. Hope this can help.
You can try to use the nullish coalescing operator (??) instead of a logical or (||), as it is a safer operator as some might prefer, like the following:
<Items status={status ?? ''}/>
Hey,
how do you handle the no-non-null-assertion rule of Eslint? It's enabled per default now (strict mode of Angular) and I feel like it does not work all that well with Angular, especially with required Inputs, but also with forms and generated code (e.g. from an OpenAPI-specification file).
Eslint has no idea of Angular's live-cycle, so a component might have a required @Input foo, but it will still print an error in the whole typescript file if you access foo.bar, because it does not realize that their is a check for it. You can use optional-chaining in some cases (foo?.bar), but this is redundant and does not work for assignments. Or you can use the non-null-assertion (foo!.bar) but then Eslint will shout at you.
Sure, I can add a comment and disable the check every single time, but then my code is polluted with all that annoying comments.
Or I can disable the rule, but now our juniors can pick up that ball and run with it, even where non-nullness is NOT guaranteed by some previous checks.
How do you handle no-non-null-assertion?