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

Posted 2023-02-23

【中文标题】如何使用 TypeScript 在 Vue2.x 类组件中正确注释

【英文标题】：How to do annotating correctly in Vue2.x Class component with TypeScript

【发布时间】：2021-08-13 10:43:20

【问题描述】：

我已经通过@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>

我总是收到如下警告消息：

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

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

【问题讨论】：

请不要将代码发布为图像。做你想做的事是不正确的。不要将类与组合 API 混合使用，它们是互斥的。

嗨@EstusFlask 感谢您的回复。我知道 Composition API 不是主要用于类组件，可能不建议混用。但是我的项目中有大量的类组件代码库。我正在尝试逐步从 Vue2.x 迁移到 Vue3。你介意给我一些建议吗？

这不仅仅是主要的，它根本不是针对类组件的。使用一个或另一个。重写组件以使用组合 API 而不是一个一个类。

【参考方案1】：

您的代码在 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'
  ],

【讨论】：

非常感谢您的帮助！我试过@nuxtjs/composition-api。它并不真正运作良好。原始警告已修复，但其他一些警告出现了? 根本原因必须是类组件和 TypeScript 类型中的某些内容。我决定等待声明更好地支持 Compoistion API 的 vue-class-component@v8。