组合式 API_为 ref() 标注类型

Vue3对TypeScript支持更友好了，我们可以将JavaScript语法更换为TypeScript，提升开发体验

创建涵盖TS语法项目

ref对应TypeScript语法

ref 会根据初始化时的值推导其类型

<template>
  <p>{{ name }}</p>
</template>
<script setup lang="ts">
import { ref } from "vue"
    
const name = ref("itbaizhan")
name.value = 200 // Type 'number' is not assignable to type 'string'
    
</script>

有时我们可能想为 ref 内的值指定一个更复杂的类型，可以通过使用 Ref 这个类型

xxxxxxxxxx
<template>
  <p>{{ name }}</p>
</template>
<script setup lang="ts">
    
import { ref } from "vue"
import type { Ref } from 'vue'
    
const name:Ref<string|number> = ref("itbaizhan")
name.value = 12
    
</script>

或者，在调用 ref() 时传入一个泛型参数，来覆盖默认的推导行为

​x
<template>
  <p>{{ name }}</p>
</template>
<script setup lang="ts">

import { ref } from "vue"

const name = ref<string|number>("itbaizhan")
name.value = 12

</script>

如果你指定了一个泛型参数但没有给出初始值，那么最后得到的就将是一个包含 undefined 的联合类型

xxxxxxxxxx
<template>
  <p>{{ name }}</p>
</template>
<script setup lang="ts">

import { ref } from "vue"

const name = ref<string>()
name.value = "itbaizhan"

</script>

温馨提示

在定义 ref 总是传递默认值

实时效果反馈

1. 在Vue3项目中，TypeScript语法下，使用ref指定泛型参数未赋值，那么ref类型是什么：

A string

B number

C 未知类型

D undefined

答案

1=>D