Inconsistent behaviour when accessing setters between TypeScript (.ts files) and TypeScript in JSDoc.

[DennisSkoko]

Bug Report

🔎 Search Terms

Most major ones is these but haven't had much luck in finding anyone with the same issue.

• Inconsistent behaviour between Typescript and TypeScript in JSDoc
• Inconsistent behaviour when accessing setters between TypeScript and JSDoc

Could be good to note that I've made an StackOverflow question. So if you try searching yourself and you find that one, that one was from me.

🕗 Version & Regression Information

• This is the behavior in every version I tried, and I reviewed the FAQ for entries about the issue

I tried the following versions:

• v4.6.0-dev.20220125
• v4.5.5
• v4.5.4
• v4.4.4

⏯ Playground Link

Since my problem lies in the TypeScript in JSDoc, it will have to be a repo. But I promise it is very simple.

💻 Code

Simple showcase of the problem, please note that this is a JavaScript file:

export class Input extends HTMLElement {
  static get observedAttributes() {
    return ['label']
  }

  /**
   * @param {string} text
   */
  set label(text) {
    const span = this.shadowRoot?.querySelector('span')
    if (span) span.textContent = text
  }

  /**
   * @param {'label'} name
   * @param {string | null} _oldValue
   * @param {string | null} newValue
   */
  attributeChangedCallback(name, _oldValue, newValue) {
    this[name] = newValue || '' // Duplicate property 'label' ts(2718)

    // This line works fine but note the `this.label` instead of `this[name]` which I prefer.
    // this.label = newValue || ''
  }
}

🙁 Actual behavior

Typescript can't seem to recognize that label is a setter when using a variable for specifying the property name. My guess is that it is thinks that I'm trying to define a property named label.

🙂 Expected behavior

I expect no Duplicare property 'label'. Reason for expecting this is that I tried converting my file to TypeScript and I received no errors.

They are very similar but the difference is that instead of specifying the parameter types in JSDoc, I did it what we usually do in TypeScript like this (you can find the whole TypeScript file in the repo):

attributeChangedCallback(name: 'label', _oldValue: string | null, newValue: string | null) {
  this[name] = newValue || '' // works fine
}

[RyanCavanaugh]

Since my problem lies in the TypeScript in JSDoc

NBD but the Playground does support JS too 🙂

This looks likely to be a simple fix

[a-tarasyuk]

This is a late-bound symbol.

this[name] = newValue

Based on the comments, this is expected behavior

// Report an error if a late-bound member has the same name as an early-bound member,
// or if we have another early-bound symbol declaration with the same name and
// conflicting flags.
const earlySymbol = earlySymbols && earlySymbols.get(memberName);
if (lateSymbol.flags & getExcludedSymbolFlags(symbolFlags) || earlySymbol) {
    // If we have an existing early-bound member, combine its declarations so that we can
    // report an error at each declaration.
    ...
}

Example

/cc @RyanCavanaugh