False positives of "Property is private and only accessible within class - ts(2341)"

[omnichronous]

First of all, thank you for your work and support. I've read through a lot of issues here and in related repositories but I still can't understand why I see these errors.

Here is the environment of the project I'm working on:

• Vue version: 2.7.13
• Class-Style Vue Components written in TypeScript
• VSCode version: 1.77.0
• Volar version: 1.3.8
• TypeScript Vue Plugin (Volar) version: 1.2.0
• TypeScript and JavaScript Language Features built-in extension disabled, as per Takeover mode

The errors appear when I access methods and properties defined as private from the template.

private close() {
  this.$emit('close')
}

<button @click.native="close"/>

Property 'close' is private and only accessible within class 'MyComponent'.ts(2341)

To my understanding the template in a SFC is compiled down to a render function which works the same way as if you had defined it in the component options, i.e. it would be a member of the same class, so it would have no problems calling private methods in that same class. And indeed when I run the project everything works normally.

[hysan]

@omnichronous I don't have the same environment, but I have a similar one with class style components. Try setting experimentalUseElementAccessInTemplate to true in your tsconfig.json. This is what allowed the type hinting to work correctly in templates for me. Example snippet of what I have:

{
  "vueCompilerOptions": {
    // "target": 2.7,
    "target": 2, // For Vue version <= 2.6.14
    "experimentalUseElementAccessInTemplate": true
  },
  "compilerOptions": {
    ...
  }
}

The related issue that led me to this setting was: #997
The feature was added last year: https://github.com/vuejs/language-tools/blob/master/CHANGELOG.md#109-20221023

[LukasWillin]

@hysan

@omnichronous I don't have the same environment, but I have a similar one with class style components. Try setting experimentalUseElementAccessInTemplate to true in your tsconfig.json. This is what allowed the type hinting to work correctly in templates for me. Example snippet of what I have:

{
  "vueCompilerOptions": {
    // "target": 2.7,
    "target": 2, // For Vue version <= 2.6.14
    "experimentalUseElementAccessInTemplate": true
  },
  "compilerOptions": {
    ...
  }
}

The related issue that led me to this setting was: #997 The feature was added last year: https://github.com/vuejs/language-tools/blob/master/CHANGELOG.md#109-20221023

Simply adding "experimentalUseElementAccessInTemplate": true already fixed the issue for me:
VS Code Extension Volar: v1.6.0
VS-Code: 1.77.3
@vue/cli 4.5.14
Typescript: 4.2.2
vue@3.2.47
vue-class-component@7.2.6

[omnichronous]

Amazing, thank you so much @hysan! Problem solved, I'll close this issue.

[Brazlucas]

Thank you so much @hysan, it's working here!!