如何在带有 TypeScript 的 Vue.js 中使用计算道具？

Question

有很多关于如何使用 JavaScript 语言与 Vue.js 交互的文档，还有一些关于 TypeScript 的文档。问题是你如何定义 computed 一个 vue 组件中的道具，如果它是用 TypeScript 编写的？

根据 官方示例， 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 ？

原文由 Lev Khruschev 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用属性访问器来声明计算属性。请参阅 Vue 类组件。一旦你输入输入，getter 就会被触发。

例如：

 <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>

---

Vue 组合 API 更新

<template>
  <div>
    <input type="text" name="Test Value" id v-model="text" />

    <label>{{label}}</label>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from "@vue/composition-api";

export default defineComponent({
  setup() {
    const text = ref("test");

    const label = computed(() => {
      return text.value;
    });

    return {
      text,
      label
    };
  }
});
</script>

原文由 Jeremy Walters 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

由于 Vue 声明文件的循环性质，TypeScript 可能难以推断某些方法的类型。出于这个原因，您可能需要在 render 和 computed 中的方法上注释返回类型。

 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 选项将有助于找到许多这些未注释的方法。

更多信息

原文由 niclas_4 发布，翻译遵循 CC BY-SA 4.0 许可协议