vue3+ts中 动态获取的对象用插值表达式使用

在 Vue 3 + TypeScript 中，动态获取的对象可以通过插值表达式中使用对象的属性来展示，需要进行类型定义和类型断言。

首先，在组件的 `setup()` 函数中定义动态获取的对象 `userInfo`，并通过 `ref()` 函数将其转化为响应式对象，同时定义 `UserInfo` 类型来表示对象的属性和类型：

import { defineComponent, ref } from 'vue'

interface UserInfo {
  name: string;
  age: number;
}

export default defineComponent({
  setup() {
    const userInfo = ref<UserInfo>({
      name: '张三',
      age: 20
    })

    return {
      userInfo
    }
  }
})

然后，在模板中使用插值表达式展示动态获取对象的属性时，需要使用类型断言 `as UserInfo` 将对象转化为 `UserInfo` 类型，以便在编译期间进行类型检查：

<template>
  <div>
    <p>姓名：{{ (userInfo as UserInfo).name }}</p>
    <p>年龄：{{ (userInfo as UserInfo).age }}</p>
  </div>
</template>

在这个例子中，`(userInfo as UserInfo)` 表示将 `userInfo` 对象转化为 `UserInfo` 类型，然后使用点运算符来访问对象的属性。这样，当 `userInfo` 对象中的属性值发生变化时，对应的展示内容也会自动更新。