父组件向子组件传参时如何使用类型断言？

<!-- ChildComponent.vue -->
<template>
  <div>
    <p>用户ID: {{ userId }}</p>
    <p>用户信息: {{ userInfo.name }} - {{ userInfo.age }}</p>
  </div>
</template>

<script setup lang="ts">
interface UserInfo {
  name: string;
  age: number;
}

// 定义Props类型
const props = defineProps<{
  userId: number;
  userInfo: UserInfo;
}>();
</script>

<!-- ParentComponent.vue -->
<template>
  <!-- 直接在模板中使用断言（不推荐，模板中类型检查较弱） -->
  <ChildComponent 
    :userId="rawId as number" 
    :userInfo="rawData as UserInfo" 
  />
</template>

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

// 模拟后端返回的原始数据（类型不确定）
const rawId: unknown = "123"; // 实际是数字，但后端返回字符串
const rawData: any = { name: "张三", age: "25" }; // age实际应为number，但返回了string

// 定义子组件需要的UserInfo类型
interface UserInfo {
  name: string;
  age: number;
}

// 在脚本中处理断言（推荐，类型检查更严格）
const processedId = rawId as number;
const processedUserInfo = {
  ...rawData,
  age: Number(rawData.age) // 转换类型
} as UserInfo;
</script>

// 定义类型守卫函数
function isUserInfo(data: any): data is UserInfo {
  return (
    typeof data === 'object' &&
    data !== null &&
    typeof data.name === 'string' &&
    typeof data.age === 'number'
  );
}

// 使用类型守卫
if (isUserInfo(rawData)) {
  // 这里TypeScript会自动推断rawData为UserInfo类型
  const safeUserInfo = rawData;
} else {
  // 处理类型不匹配的情况
  console.error("数据格式错误");
}

<template>
  <ChildComponent 
    :userId="processedId" 
    :userInfo="processedUserInfo" 
  />
</template>

<script setup lang="ts">
import { computed } from 'vue';

// 用计算属性处理并断言类型
const processedId = computed(() => {
  return Number(rawId) as number;
});

const processedUserInfo = computed(() => {
  return {
    name: rawData.name as string,
    age: Number(rawData.age) as number
  };
});
</script>