时间戳

首页 > 解决方案 > 如何使用 TypeScript 在 Vue2.x 类组件中正确注释

typescript - 如何使用 TypeScript 在 Vue2.x 类组件中正确注释

问题描述

我采用了我的项目@vue/composition-api

// main.ts
import Vue from 'vue'
import VueCompositionApi from '@vue/composition-api'

Vue.use(VueCompositionApi)

但是setup()在类组件中设置时，

<template>
  <h1>{{ name }}</h1>
</template>

<script lang="ts">
import { ComputedRef, ref } from '@vue/composition-api'
import { Component, Vue } from 'vue-property-decorator'

function useName(): { name: ComputedRef<string> } {
  const name = ref('Joe')
  return { name }
}

@Component({
  setup() {
    const { name } = useName()
    return { name }
  }
})
export default class TestName extends Vue {}
</script>

我总是收到如下警告消息： 在此处输入图像描述

我知道这来自data类组件中常规字段中缺少的属性定义。但是通过使用@vue/composition-api，我们实际上不需要设置data属性。

有没有人知道如何解决这个问题。

标签： typescriptvue.jsvuejs2vue-composition-apivue-class-components

解决方案

您的代码在Vue项目中正常运行，但您的浏览器控制台屏幕截图显示您正在使用Nuxt。

要在 Nuxt 中使用 Composition API，请安装@nuxtjs/composition-api（其中包括@vue/composition-api，因此需要显式安装）：

npm i -S @nuxtjs/composition-api

然后在 中nuxt.config.js，将其添加为构建模块：

module.exports = {
  buildModules: [
    '@nuxtjs/composition-api/module'
  ],
}

推荐阅读