Vue.js中数组匹配操作引发的TypeScript类型错误解决求助

问题场景 #

你想要实现的逻辑是：当组件接收到existingUsers props时，把allUsers中与existingUsers匹配的用户的isSelected属性设为true；如果没有传入existingUsers，则userList直接等于allUsers。但在defineUsers函数的userList.value = allUsers.value.map(...)这一行遇到了类型错误，错误提示Type 'ComputedRef<void[]>' is missing the following properties from type '{ id: number; ...}'。

错误原因分析 #

这个错误的核心在于你在map回调里使用了forEach：

• forEach方法没有返回值（它的返回类型是void），所以当你在map里调用existingUsers.forEach(...)时，map会把每个回调的结果（也就是void）收集起来，最终得到一个void[]类型的数组。
• 但userList.value的类型是Array<UserModel>，void[]和UserModel[]类型不兼容，所以触发了Vetur的类型检查错误。

解决方案 #

我们需要替换forEach为有返回值的判断方法，比如some或者find，用来检查当前用户是否存在于existingUsers中，这样map就能返回正确的UserModel类型数组。

具体修正步骤：

1. 用some方法替代forEach：some会遍历数组，只要找到一个匹配项就返回true，否则返回false，正好用来判断用户是否需要标记为选中。
2. 在map回调中，要么直接修改当前用户的isSelected属性并返回用户对象，要么返回一个新的用户对象（推荐这种不可变的写法，避免意外修改原数组）。

修正后的完整代码 #

export default defineComponent({
  name: 'Users',
  props: {
    existingUsers : {
      type: Array as PropType<Array<UserModel>>,
    }
  },
  async setup(props) {
    const allUsers = ref<Array<UserModel>>(await userService.list())
    // 简化初始值，因为defineUsers会赋值
    const userList = ref<Array<UserModel>>([])

    function defineUsers(): Array<UserModel> {
      if (props.existingUsers) {
        const existingUsers = props.existingUsers
        userList.value = allUsers.value.map((user: UserModel) => {
          // 检查当前用户是否在existingUsers中存在
          const shouldSelect = existingUsers.some(us => us.id === user.id)
          // 返回新对象，保持不可变性，同时设置isSelected
          return {
            ...user,
            isSelected: shouldSelect
          }
        })
        return userList.value;
      } else {
        userList.value = [...allUsers.value] // 用展开符创建副本，避免直接引用原数组
        return userList.value
      }
    }

    defineUsers();
    // 记得返回需要在模板中使用的变量
    return { userList }
  }
})

额外优化建议 #

• 如果UserModel原本没有isSelected属性，建议给它添加这个可选属性，比如：

  interface UserModel {
    id: number;
    email: string;
    first_name: string;
    last_name: string;
    isSelected?: boolean; // 添加可选的isSelected属性
  }
  

• 可以把existingUsers的id提前提取成一个Set，这样判断存在性的效率会更高（尤其是当用户数量很多时）：

  const existingUserIds = new Set(existingUsers.map(us => us.id))
  // 之后判断时直接用existingUserIds.has(user.id)
  

内容的提问来源于stack exchange，提问作者Giulia