wrong typing of "this" when returning concatenated string in computed

[jbmaisner]

• I have searched through existing issues
• I have read through docs
• I have read FAQ

Info

• Platform: macOS
• Vetur version: 0.22.6
• VS Code version: 1.40.2

Problem

When I return a concat string + props in a computed, the keyword "this" is wrong typed in methods and lifecycle hooks. It's no more typed as "CombinedVueInstance" which causes some problems with Intellisense suggestions and type safe javascript through JSDoc.
Please see screenshots for better comprehension.

Wrong typing of keyword "this"

Correct typing of keyword "this"

Reproducible Case

You can simply insert the following code example,
Or create a SFC with any template, then in the script section, add a mounted hook and a lambda method. Finally add a computed returning a string + props.

Hover the keyword "this" in the mounted hook or in the method.

Code example

<template>
	<div/>
</template>

<script>
export default {
	props: {
		tata: {
			type: String,
			default: null
		}
	},

	computed: {
		titi () {
			return 'toto' + this.tata;
		}
	},

	mounted () {
		this.$el;
	},

	methods: {
		toto () {
			console.log(this.tata);
		}
	}
};
</script>

[kernZero]

+1 same problem on same platform

[octref]

This seems to work fine for me (annotating the return type)

<template>
	<div></div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
	props: {
		tata: {
			type: String,
			default: null
		}
	},

	computed: {
		titi (): string {
			return 'toto' + this.tata;
		}
	},

	mounted () {
		this.$el;
	},

	methods: {
		toto () {
			console.log(this.tata);
		}
	}
})
</script>

I guess it's somewhat related to microsoft/TypeScript#30854. Need to file a new issue in TS...

[F0rsaken]

@jbmaisner @kernZero you can use JSDoc to annotate return types of computed and fix your issue

[octref]

I can confirm, adding JSDoc annotation works. But upstream issue is closed as Working as Intended so there's nothing I can do.

@DanielRosenwasser This used to work as expected and fixing this would help a lot of beginner Vue users who don't know TS.

[DanielRosenwasser]

Can you give it a shot on TS 3.9.5? There were a few small fixes that might have helped there.

[octref]

@DanielRosenwasser I'm using [email protected], still doesn't work

<template>
  <div/>
</template>

<script>
import Vue from 'vue'

export default {
  props: {
    tata: {
      type: String,
      default: null
    }
  },

  computed: {
    /**
     * @returns {string}
     */
    titi () {
      return 'toto' + this.tata;
    }
  },

  mounted () {
    this.$el;
  },

  methods: {
    toto () {
      console.log(this.tata);
    }
  }
};
</script>

Once you remove the JSDoc, this fails to resolve its type.

[yoyo930021]

I think duplicate of #1707 ?

[octref]

Duplicate of #1707.