Nuxt.js Typescript - 尝试访问计算属性中的数据对象时出错

Question

我正在使用 options api，当尝试访问计算属性中的 Vue 数据对象的属性时，我在类型检查中收到错误。

Property 'quantity' does not exist on type 'CombinedVueInstance<Vue, unknown, unknown, { item: unknown; total: unknown; menuItemCategories: any; }, Readonly<Record<never, any>>>'

该属性确实存在，因为页面能够使用计算属性正确加载和显示呈现的模板 - 只有类型检查器会抱怨。

组件代码（长度简化）：

import Vue from "vue";
export default Vue.extend({
  data() {
    quantity: 1,
  },

  computed: {
    total() {
      return this.item.price * this.quantity;
    }
  },
});

编辑

我已经能够通过使用该data属性作为对象来解决这个问题。

但这确实会产生一些问题，因为最佳实践是用作data返回对象的函数。同样的问题也适用于asyncData.

进一步的试验和错误表明我能够data通过该methods属性访问函数属性。但是，如果我使用mapGettersvuex 中的助手，它会抛出与计算属性相同的类型错误。

它们methods在计算属性内的类型中也不可用CombinedVueInstance。

tsconfig.json

// tsconfig.json
{
  "compilerOptions": {
    "target": "es2018",
    "module": "esnext",
    "moduleResolution": "node",
    "lib": [
      "esnext",
      "esnext.asynciterable",
      "dom"
    ],
    "esModuleInterop": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noEmit": true,
    "baseUrl": "./src",
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./*"
      ]
    },
    "types": [
      "@types/node",
      "@nuxt/types",
      "@nuxtjs/axios"
    ]
  },
  "exclude": [
    "node_modules"
  ]
}

vue-shim.d.ts

// tsconfig.json
{
  "compilerOptions": {
    "target": "es2018",
    "module": "esnext",
    "moduleResolution": "node",
    "lib": [
      "esnext",
      "esnext.asynciterable",
      "dom"
    ],
    "esModuleInterop": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noEmit": true,
    "baseUrl": "./src",
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./*"
      ]
    },
    "types": [
      "@types/node",
      "@nuxt/types",
      "@nuxtjs/axios"
    ]
  },
  "exclude": [
    "node_modules"
  ]
}

Answer 1

使用 Nuxt Typescript 进行类型检查会出现一些奇怪的行为，因为它无法正确推断所有类型。使用 Vuex vanilla 和辅助函数进一步加剧了这一点。

要以最少的样板获取完整的类型信息，最好使用vue-class-component和vue-property-decorator ，如Nuxt Typescript 文档 - 组件（请参阅类 API）中所示，以及基于类的vuex-module-decorators请参阅Nuxt Typescript 文档 - 商店。

但是，要在仍然使用选项 API 的同时回答解决此问题的原始问题 - 您必须声明 和 中所有函数的返回computed类型methods；并根据需要强制 Vuex 辅助函数。

不幸的是，我们仍然没有得到正确的类型检查，asyncData所以我们必须复制我们的代码data和asyncData函数。

import Vue from "vue";
import { mapGetters } from "vuex";

export default Vue.extend({
  // Default component data - supports type checking
  data() {
    return {
      quantity: 1,
    }
  },

  // Actual component data - sourced from api
  async asyncData() {
    const theAwaitedQuantity = // ... some await methods and promises from a backend api
    return {
      quantity: theAwaitedQuantity,
    }
  },

  computed: {
    ...mapGetters(["item"]),

    total(): number {
      // mapped properties from helper functions must have their types coerced.
      return (this.item as ItemType).price * this.quantity;
    }
  },

  methods: {
    someMethod(): string {
      return "methods also need their return type defined";
    }
  }
});

另请参阅此相关问题： “CombinedVueInstance<Vue, {}, {}, {}, Readonly<Record<never, any>>>”类型上不存在属性“XXX”