面试题：Vue中如何使用Vue Composition API结合TypeScript定义响应式数据并增强类型安全性

Question

请使用Vue Composition API结合TypeScript定义一个包含用户名（字符串类型）和年龄（数字类型）的响应式数据对象，并给出完整代码示例。同时说明为什么这样做能增强类型安全性。

Answer 1

<template>
  <div>
    <p>用户名: {{ userData.name }}</p>
    <p>年龄: {{ userData.age }}</p>
  </div>
</template>

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

export default defineComponent({
  setup() {
    // 定义响应式数据对象
    const userData = ref<{ name: string; age: number }>({
      name: '张三',
      age: 20
    });

    return {
      userData
    };
  }
});
</script>

这样做能增强类型安全性的原因：

1. 明确类型定义：使用TypeScript对userData的属性name和age分别指定了string和number类型，在开发过程中如果对这些属性赋值不符合指定类型，TypeScript编译器会报错，从而在编码阶段就能发现类型相关的错误，而不是等到运行时才暴露问题。
2. 代码提示：在编辑器中，当使用userData对象时，由于有明确的类型定义，编辑器能提供准确的代码提示，提高开发效率，同时也能避免因拼写错误等导致的运行时错误。