Vue Composition API中如何正确为Ref类型的firstName指定string类型？

你的代码有两个核心问题导致错误：

1. 类型标注错误 #

你用了as String，这里的String是JS的包装对象类型，而我们需要的是TS原始类型string。正确的ref类型标注有两种方式：

• 让TS自动推断（推荐，因为初始值是空字符串，TS会自动识别为string类型的Ref）
• 显式指定泛型或类型

2. 未在setup中返回变量 #

模板无法访问setup内部定义的变量，必须通过return暴露出去。

修复后的完整代码（自动推断版） #

<template>
  <v-sheet>
    <v-form fast-fail @submit.prevent>
      <v-text-field label="First name">
        {{ firstName }}
      </v-text-field>
    </v-form>
  </v-sheet>
</template>

<script lang="ts">
import { ref } from 'vue'
export default {
  setup() {
    // TS自动推断为Ref<string>类型
    const firstName = ref('')
    // 必须返回变量，模板才能访问
    return { firstName }
  }
}
</script>

显式标注类型的版本 #

如果你需要明确指定类型，可以用以下两种写法之一：

// 写法1：用泛型参数
const firstName = ref<string>('')

// 写法2：显式标注变量类型
import { ref, Ref } from 'vue'
const firstName: Ref<string> = ref('')

另外，模板里的</div> -->是无效的注释残留，记得删掉，避免潜在语法问题。

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