关于如何使用javascript语言与Vue.js进行交互的文档很多,而关于打字稿的知识则很少。问题是如何在computed
组件中编写打字稿时定义vue
道具。根据{{3}} computed
是具有功能的对象,这些功能将基于其依赖的道具进行缓存。
这是我做的一个例子:
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}`;
},
}
}
和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>
第三列表项不输出任何内容。有人可以告诉我在这种情况下如何定义computed
吗?
答案 0 :(得分:17)
您可以使用属性访问器来声明计算的属性(https://github.com/vuejs/vue-class-component)。键入u时,将立即触发该吸气剂。参见示例
<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>
答案 1 :(得分:1)
由于Vue声明文件的循环性质,TypeScript可能难以推断某些方法的类型。出于这个原因,您可能需要在诸如render之类的方法上的返回值类型和计算类型中的方法添加注释。
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)
}
})
如果您发现类型推断或成员完成不起作用,则注释某些方法可能有助于解决这些问题。使用--noImplicitAny选项将帮助找到许多这些未注释的方法。