vue3 interface

// 定义一个接口用于描述用户信息
interface User {
  id: number; // 用户ID，必填项
  name: string; // 用户名，必填项
  age?: number; // 年龄，可选项
}

// 在 Vue 3 组件中使用该接口
<template>
  <div>
    <p>User ID: {{ user.id }}</p>
    <p>User Name: {{ user.name }}</p>
    <p v-if="user.age">User Age: {{ user.age }}</p>
  </div>
</template>

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

// 使用接口来定义用户的类型
const user = ref<User>({
  id: 1,
  name: 'John Doe',
  age: 28
});
</script>

解释说明：

1. 接口定义：我们首先定义了一个 User 接口，用于描述用户信息。其中 id 和 name 是必填项，而 age 是可选项（通过 ? 表示）。
2. Vue 3 组件：在 Vue 3 的组件中，我们使用 <script setup> 语法和 TypeScript 来定义一个响应式的 user 对象，并且确保它的类型符合 User 接口的定义。
3. 模板绑定：在模板中，我们通过插值表达式 ({{ }}) 来显示用户的 id 和 name，并且通过 v-if 指令来有条件地显示用户的年龄（如果存在的话）。