"this" keyword infers type "any" instead of vue instance

[ludwig801]

Context

I am developing a project using Vue 2.6.14 version.
That being said, I have configured tsconfig's vueCompilerOptions.target to "2".

Lets say I create the following component:

<script>
export default { 
  data() { 
    return { 
      name: "Alfa" 
    } 
  }
}
</script>

Now, lets also suppose I add the "created" hook:

<script>
export default { 
  ...
  created() {
    this.name = "Beta";
  }
}
</script>

Problem

The issue arises when I type "this." in the created() hook - or any other method or computed function, for that matter - the "this" keyword is set to type "any", as opposed to the correct type which should be an extension of Vue with a string property "name".

So, type inferring is completely off. Now, I have no idea wether this is a general bug of the extension, or it is simply related to the use of the "export default" syntax, using Vue 2 syntax.

Environment

• Volar: 0.40.13
• Vue: 2.6.14
• VSCode: 1.71.0
• Typescript: 4.8.3 (in takeover mode)

[colinblaise]

You should update to Vue 2.7.X

[ludwig801]

You should update to Vue 2.7.X

I don't mean to be disrespectful, @colinblaise, but is this an official answer? Where is this mentioned in the Readme or the Marketplace page?

The project I'm using this for is not a hobby project, but a production-deployed one. Simply put, I cannot update the Vue version on a whim.

[colinblaise]

No offense taken, I am in no way associated with the Volar project so no it is not an official answer.

On another note, I've seen issues start happening when the typescript version of VSCode differs from the version Volar is using. Also, typing this actually worked for you when not using script lang="ts"?

Is type inference broke if you downgrade to use Typescript 4.8.2 (takeover)?

[ludwig801]

No offense taken, I am in no way associated with the Volar project so no it is not an official answer.

On another note, I've seen issues start happening when the typescript version of VSCode differs from the version Volar is using. Also, typing this actually worked for you when not using script lang="ts"?

Is type inference broke if you downgrade to use Typescript 4.8.2 (takeover)?

I've tried with TS 4.8.2 and I've changed the lang attribute value and made no difference.
It does appear to have something to do with the type inference for Vue 2.6.x

Well, guess I'll have to use an older version of the extension until this is either fixed or we get to migrate the Vue version.

[johnsoncodehk]

This is Vue.extend limitation, you can add following content to tsconfig.json / jsconfig.json for better types support if you have install @vue/runtime-dom.

{
  "vueCompilerOptions": {
    "optionsWrapper": [
      "(await import('@vue/runtime-dom')).defineComponent(",
      ")"
    ]
  }
}