面试题：TypeScript在Vue3组合式API中如何定义响应式数据类型

Question

在Vue3的组合式API中，使用TypeScript定义一个包含字符串和数字的响应式对象，并简要说明其类型定义的关键要点。

Answer 1

1. 定义响应式对象：

   import { ref } from 'vue';
   
   // 使用ref定义响应式对象
   const myReactiveObject = ref<{
     myString: string;
     myNumber: number;
   }>({
     myString: 'Hello',
     myNumber: 10
   });
   

2. 类型定义关键要点：
   • 使用ref：在Vue 3的组合式API中，ref用于创建响应式数据。这里ref接受泛型参数，用于明确对象的类型。
   • 对象类型定义：通过对象字面量的形式在泛型中定义对象的结构，指定每个属性的类型。例如myString为string类型，myNumber为number类型。这样可以让TypeScript在编译时进行类型检查，避免在运行时出现类型错误。