TS2339 refactoring warnings (three gray dots) appearing under javascript properties

[aminomancer]

Does this issue occur when all extensions are disabled?: Yes

• VS Code Version: 1.60.2 (user setup)
• OS Version: Windows 10 Pro 20H2, 19042.1165, Windows Feature Experience Pack 120.2212.3530.0

Steps to Reproduce:

I have a JavaScript file. It declares & defines a variable in the topmost scope, like const options = {};
Then, at some dynamic point during runtime, user configuration values (properties) are cloned from local storage into this options object:
for (const [key, field] of Object.entries(storage)) options[key] = field.value;

So obviously TypeScript validator thinks options.blahblah does not exist. Which is fine, I don't expect it to. But instead of just creating a lightbulb icon to the left when I click on its general area, it adds 3 dots under the beginning of the property name, which appear no matter what I do. They're showing 100% of the time. When I have dozens of properties being referenced all over the place, these little dotted underlines cause a large amount of visual clutter.

It's irritating because there's nothing wrong with my script, but vs code keeps treating it as somehow erroneous and shoving it in my face. It doesn't give me any valuable refactoring suggestions either. Astonishingly, it clutters my document with a hundred of these warnings, only to recommend "extracting to Fluent files" in each case. Obviously that suggestion is completely irrelevant to my use case.

I just want some way to shut this off. When I originally wrote this script some months ago, and validated it with ESLint, these gray dots did not exist. It's only when I came back to update it that I noticed the warnings. Naturally I went digging through the settings, but could not find anything that sounded relevant. I did some google searches and found people talking about other representations of the same rule (2339) in vs code extensions. But I couldn't find any solution or suggestion for disabling it in the TS/JS validator of vs code proper.

So I just went ahead and started blindly unchecking boxes in the settings. I figured eventually I'd reload vs code and see the dotted underlines are gone, but no such luck. So I'm wondering if a setting to disable this even exists.

Thank you 🙏

[mjbvz]

Please share a self contained block of code that demonstrates the issue

[aminomancer]

Oh, thought I already did. Is this better?

let a = {};
let b = {
    apple: true,
    banana: false,
    grape: undefined,
    lychee: null,
};
for (const [key, val] of Object.entries(b)) a[key] = val;
console.log(a.apple);

If that's unclear you can take a look at the greasemonkey script I described in my first post, which was suddenly filled with dotted underlines a month or two ago.

To be clear, I don't expect VS code to recognize that the for loop I described above would define apple on a. I understand that would be substantially more computationally expensive than what it's currently doing. I just want some way to turn off the 3 dots display, because it's making my editors so cluttered and causing me to waste time reexamining code that isn't defective, for an alert that offers no refactoring suggestions anyway.

However, I would prefer if there was a way to keep the 3 dots display for other refactoring suggestions that are relevant, and only turn off the complaint for rule TS2339: Property 'foo' does not exist on type 'bar'.

[mjbvz]

@sandersn I think this started with TS 4.4, possibly due to the spelling suggestion work?

[sandersn]

I confirmed that it's an unintended effect of that PR (#44271). I'll figure out why other, unwanted suggestions are showing up.

[sandersn]

reportNonExistentProperty can report several kinds of errors, most of which do not contain spelling suggestions. Currently, all these errors are getting turned into suggestions. Only the did-you-mean ones should.