Il y a beaucoup de documentation sur la façon d'interagir avec Vue.js en utilisant le langage javascript et juste un peu sur TypeScript. La question est de savoir comment définir les accessoires computed
dans le composant vue
s’il est écrit sur TypeScript. Selon l'exemple officielcomputed
est un objet avec des fonctions qui seront mises en cache en fonction de leurs accessoires dépendants .
import Vue from 'vue';
import { Component } from "vue-property-decorator";
@Component({})
export default class ComputedDemo extends Vue {
private firstName: string = 'John';
private lastName: string = 'Doe';
private computed: object = {
fullName(): string {
return `${this.firstName} ${this.lastName}`;
},
}
}
Et html:
<div>
<h1>Computed props ts demo</h1>
<ul>
<li>First name: {{firstName}}</li>
<li>Last name: {{lastName}}</li>
<li>Together: {{fullName}}</li>
</ul>
</div>
Le troisième élément de liste ne génère rien. Quelqu'un peut-il me dire comment définir computed
dans ce cas, s'il vous plaît?
Vous pouvez utiliser des accesseurs de propriété pour déclarer les propriétés calculées ( https://github.com/vuejs/vue-class-component ). Le getter sera déclenché dès que vous tapez l’entrée. Voir exemple
<template>
<div>
<input type="text" name="Test Value" id="" v-model="text">
<label>{{label}}</label>
</div>
</template>
<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
@Component({})
export default class About extends Vue {
private text = "test";
get label() {
return this.text;
}
}
</script>
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 telles que render et celles calculées.
import Vue, { VNode } from 'vue'
const Component = Vue.extend({
data () {
return {
msg: 'Hello'
}
},
methods: {
// need annotation due to `this` in return type
greet (): string {
return this.msg + ' world'
}
},
computed: {
// need annotation
greeting(): string {
return this.greet() + '!'
}
},
// `createElement` is inferred, but `render` needs return type
render (createElement): VNode {
return createElement('div', this.greeting)
}
})
Si vous trouvez que l'inférence de type ou l'achèvement de membre ne fonctionne pas, annoter certaines méthodes peut aider à résoudre ces problèmes. L'utilisation de l'option --noImplicitAny vous aidera à trouver plusieurs de ces méthodes non annotées.