Vue2.7迁移TS时，计算属性带setter致方法调用data属性报错

问题重现 #

在Vue 2.7.14项目中开启<script lang="ts">后，给计算属性添加setter，方法中调用data定义的属性会触发Vetur报错：

Property '' does not exist on type 'Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue<Record<string, any>, Record<string, any>, never, never, ...>>'.Vetur(2339)

属性实际存在，且仅本地设备触发该错误，同事环境正常。触发错误的示例代码如下：

<script lang="ts">
export default {
data() {
  return {
    test: 'hello world'
  }
},
computed: {
  testing: {
    get() {
      return this.test;
    },
    set(value) {
      console.log(value);
    }
  }
},
methods: {
  testMethod() {
    // Test gets a red underline here and gets said error
    this.test = 'hello Mom'
  }
}
</script>

解决方案 #

1. 修复Vetur本地配置或更新版本

因为仅本地出现问题，优先排查Vetur的本地状态：

• 打开VSCode插件市场，检查Vetur版本，更新到最新兼容Vue 2.7的版本；
• 重置Vetur工作区配置：在VSCode设置中搜索"Vetur"，找到工作区配置项，点击"重置"；
• 重启VSCode并重置TypeScript服务：按下Ctrl+Shift+P，输入TypeScript: Restart TS Server执行。

2. 使用defineComponent包裹组件选项

Vue 2.7内置了defineComponent，能帮助TypeScript正确推断组件的类型，解决this的类型识别问题：

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  data() {
    return {
      test: 'hello world'
    }
  },
  computed: {
    testing: {
      get() {
        return this.test;
      },
      set(value) {
        console.log(value);
      }
    }
  },
  methods: {
    testMethod() {
      this.test = 'hello Mom'
    }
  }
})
</script>

3. 确保TypeScript版本兼容

Vue 2.7要求TypeScript版本在4.5及以上，过低版本会导致类型推断异常：

• 查看本地TS版本：执行tsc -v；
• 升级到兼容版本：执行npm install typescript@~4.9 --save-dev（推荐4.9.x版本，兼容性更稳定）。

4. 切换到Volar插件（替代方案）

Vetur对Vue 2.7的TS支持不如官方的Volar完善，可尝试切换：

• 在VSCode中禁用Vetur插件，安装Volar插件；
• 在项目根目录创建vue.config.js，添加配置让Volar支持Vue 2.7：

  module.exports = {
    vueVersion: '2.7'
  }
  

内容的提问来源于stack exchange，提问作者Ayice