J'ai créé un composant vue avec TypeScript, et j'obtiens cette erreur dans data () et dans methods () :
<script lang='ts'>
import Vue from 'vue';
import axios from 'axios'
export default Vue.extend({
data: function () {
return {
open: false
}
},
computed: {
profilePath: function () {
return "/user/" + this.$store.state.profile.profile.user.id
}
},
methods: {
toggle: function () {
this.open = !this.open
if (this.open) {
// Add click listener to whole page to close dropdown
document.addEventListener('click', this.close)
}
},
close: function () {
this.open = false;
document.removeEventListener('click', this.close)
}
}
})
</script>
Par exemple:
33:18 Property 'open' does not exist on type 'CombinedVueInstance<Vue, {}, {}, {}, Readonly<Record<never, any>>>'.
31 | methods: {
32 | toggle: function () {
> 33 | this.open = !this.open
| ^
34 | if (this.open) {
35 | // Add click listener to whole page to close dropdown
36 | document.addEventListener('click', this.close)
Cette erreur s'affiche également à chaque fois que this.close () est utilisé.
Voici le composant:
Property 'xxx' does not exist on type 'CombinedVueInstance<Vue, {},
{}, {}, Readonly<Record<never, any>>>'.
Quelle est la cause de cette erreur? Il semble encore se construire en développement avec les erreurs, mais elles causent des problèmes lorsque je déploie en production.
4 Réponses :
Vous devez utiliser la function de manière correcte pour conserver la référence de ceci.
methods: {
toggle() {
this.open = !this.open
if (this.open) {
// Add click listener to whole page to close dropdown
document.addEventListener('click', this.close)
}
},
close() {
this.open = false;
document.removeEventListener('click', this.close)
}
}
Cela ne semble pas avoir changé quoi que ce soit, toujours les mêmes erreurs.
Cela semble être inexplicablement causé par l'utilisation de this. $ store pour calculer la valeur de retour de profilePath , combinée avec le type de retour non spécifié sur sa déclaration.
Une solution de contournement consiste à spécifier le type de retour comme chaîne :
profilePath: function(): string {
vérifié avec npm run serve et npm run build , en utilisant Vue CLI 3.7.0 sur macOS Mojave
Comme mentionné dans la section Typescript Support de Vue documentation:
En raison de la nature circulaire des fichiers de déclaration de Vue, TypeScript peut avoir des difficultés à déduire les types de certaines méthodes. Pour cette raison, vous devrez peut-être annoter le type de retour sur des méthodes comme render et celles en calcul.
Dans votre cas, vous devez remplacer profilePath: function () { par profilePath: function (): string {
Vous pourriez rencontrer la même erreur si vous avez une méthode render () qui renvoie une valeur, sans une annotation : VNode .
Le même problème est décrit ici https://www.gitmemory.com/issue/vuejs/vue/9873/ 485481541
Comme c'est un problème avec TS 3.4.x, 3.9.6 fonctionne très bien pour moi maintenant
Avez-vous examiné ce problème ?