面试题：Vue 3如何利用TypeScript实现更严格的组件通信类型检查

Question

在Vue 3项目中，使用TypeScript实现父子组件通信，要求对传递的props和emit的事件进行严格的类型检查，描述实现思路并给出关键代码示例。同时说明相较于Vue 2，这样做在实际开发中的优势。

Answer 1

实现思路

1. 父组件：定义数据并传递给子组件，通过defineProps来接收和类型检查。
2. 子组件：使用defineProps接收父组件传递的props并进行类型声明；通过defineEmits声明要触发的事件并进行类型检查，在需要时触发事件通知父组件。

关键代码示例

父组件

<template>
  <div>
    <ChildComponent :message="parentMessage" @child-event="handleChildEvent"/>
  </div>
</template>

<script setup lang="ts">
import ChildComponent from './ChildComponent.vue';
import { ref } from 'vue';

const parentMessage = ref('Hello from parent');

const handleChildEvent = (data: string) => {
  console.log('Received from child:', data);
};
</script>

子组件

<template>
  <button @click="sendEvent">Send Event</button>
</template>

<script setup lang="ts">
const props = defineProps<{
  message: string;
}>();

const emit = defineEmits<{
  (e: 'child-event', data: string): void;
}>();

const sendEvent = () => {
  emit('child-event', 'Hello from child');
};
</script>

相较于Vue 2的优势

1. 类型安全：Vue 3 + TypeScript能在开发阶段就发现类型错误，Vue 2在处理复杂组件通信时容易出现类型相关的运行时错误。
2. 代码可维护性：清晰的类型声明使代码结构更清晰，尤其是大型项目，便于理解和后续维护。
3. 智能提示：编辑器能基于类型声明提供更准确的智能提示，提高开发效率。