Vue 3 + TypeScript 类型错误：'{}' 上不存在属性 - 解决方法

在使用 Vue 3 + TypeScript 时，你可能会遇到这样的问题：在 <script> 中定义了某个变量、方法或计算属性，但在页面 template 中却提示类型 '{}' 上不存在属性。

这个问题可能是由于类型推断的问题导致的。Vue 3 中的 TypeScript 支持对组件的类型推断，但有时可能无法正确地推断出某些变量、方法或计算属性的类型。在这种情况下，你可以手动为这些属性添加类型注解来解决问题。

1. 为变量添加类型注解

如果在 <script> 标签中定义了某个变量，但在模板中提示类型错误，你可以尝试为该变量添加类型注解，例如：

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

// 添加类型注解
const myVariable: number = ref(0)
</script>

2. 为方法添加类型注解

如果在 <script> 标签中定义了某个方法，但在模板中提示类型错误，你可以尝试为该方法添加类型注解，例如：

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

// 添加类型注解
const increment: () => void = () => {
  myVariable.value++
}
</script>

3. 为计算属性添加类型注解

如果在 <script> 标签中定义了某个计算属性，但在模板中提示类型错误，你可以尝试为该计算属性添加类型注解，例如：

<script setup lang="ts">
import { ref, computed } from 'vue'

const myVariable = ref(0)

// 添加类型注解
const doubledValue: number = computed(() => {
  return myVariable.value * 2
})
</script>

通过手动添加类型注解，你可以帮助 TypeScript 正确地推断出变量、方法和计算属性的类型，从而解决模板中的类型错误提示。