面试题：TypeScript优化Vue3组合式API复杂业务逻辑的类型设计

1. 类型定义

在表单提交场景中，假设我们有一个用户登录表单。首先定义表单数据的类型：

// 定义表单数据类型
type LoginFormData = {
  username: string;
  password: string;
};

在Vue3的setup函数中使用这个类型：

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="formData.username" type="text" placeholder="用户名">
    <input v-model="formData.password" type="password" placeholder="密码">
    <button type="submit">登录</button>
  </form>
</template>

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

// 使用定义的类型
const formData = ref<LoginFormData>({
  username: '',
  password: ''
});

const handleSubmit = () => {
  // 这里可以处理表单提交逻辑，formData的类型已经明确
  console.log(formData.value);
};
</script>

2. 类型推断

在数据验证场景中，假设我们有一个函数用于验证邮箱格式。TypeScript可以自动推断返回值类型：

// 邮箱验证函数
const validateEmail = (email: string): boolean => {
  const re = /\S+@\S+\.\S+/;
  return re.test(email);
};

在Vue组件中使用这个函数，TypeScript会根据函数定义推断返回值类型：

<template>
  <input v-model="email" type="email" placeholder="邮箱">
  <button @click="checkEmail">验证邮箱</button>
  <p v-if="isValid">邮箱格式正确</p>
  <p v-if="!isValid && email.length > 0">邮箱格式错误</p>
</template>

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

const email = ref('');
const isValid = ref(false);

const checkEmail = () => {
  isValid.value = validateEmail(email.value);
};
</script>

3. 类型守卫

在状态管理场景中，假设我们使用Pinia进行状态管理。我们有一个包含不同用户角色的状态，并且根据角色来显示不同的内容。我们可以使用类型守卫来确保在处理特定角色相关逻辑时，状态类型是正确的。

// 定义用户角色类型
type UserRole = 'admin' | 'user' | 'guest';

// 定义用户状态
interface UserState {
  role: UserRole;
  name: string;
}

// 类型守卫函数
const isAdmin = (user: UserState): user is UserState & { role: 'admin' } => {
  return user.role === 'admin';
};

// 在Vue组件中使用
import { defineComponent } from 'vue';
import { useUserStore } from '@/stores/user';

export default defineComponent({
  setup() {
    const userStore = useUserStore();
    return () => {
      if (isAdmin(userStore.user)) {
        return <div>欢迎，管理员 {userStore.user.name}</div>;
      } else {
        return <div>欢迎，{userStore.user.name}</div>;
      }
    };
  }
});

通过以上方式，运用TypeScript的类型系统对Vue3组合式API进行设计优化，能有效提高代码的可维护性和稳定性，在复杂业务逻辑和多模块交互场景中更好地管理代码。

星途面试题库

面试题：TypeScript优化Vue3组合式API复杂业务逻辑的类型设计

知识考点

面试题答案

1. 类型定义

2. 类型推断

3. 类型守卫