用ts写一个组件的时候,遇到了Property ‘increment’ does not exist on type 'Add’的红点儿报错,但神奇的是竟然还能正常运行。
在参考一些正确的代码后,有两个解决方案。
-
在
export default class Add extends Vue {}
里面定义对应的Prop:import { Component, Vue, Prop } from “vue-property-decorator”;
import { mapState } from “vuex”;@Component({
computed: {
…mapState({
sum: (state) => (state as Record<string, number>).sum,
}),
},
methods: {
//…mapActions([“Add”, “Subtract”]),
increment() {
this.KaTeX parse error: Expected 'EOF', got '}' at position 28: …ch("Add"); }̲, decrement…store.dispatch(“Subtract”);
},
},
})
export default class Add extends Vue {
@Prop({ type: Number, default: false })
sum!: number;@Prop({ type: Function, default: false })
increment!: void;@Prop({ type: Function, default: false })
decrement!: void;
} -
删掉
@Component()
内的内容,直接在export default class Add extends Vue {}
里面写对应逻辑:import { Component, Vue, Prop } from “vue-property-decorator”;
@Component({
})
export default class Add extends Vue {
get sum(): number {
return this.$store.state.sum;
}increment(): void {
this.$store.dispatch(“Add”);
}decrement(): void {
this.$store.dispatch(“Subtract”);
}
}
这里使用get
获取sum
,类似一个计算属性。对于方法只需要直接声明即可。计算属性和方法都需要声明类型。