时间戳

首页 > 解决方案 > 打字稿反应redux，类型{}上不存在属性

reactjs - 打字稿反应redux，类型{}上不存在属性

问题描述

我正在使用 react redux 和 typescript 创建身份验证流程。我设置了我的注册身份验证状态界面和初始状态

export interface User {
  id: string;
  username: string;
  email: string;
  social: Social;
  userCourses: Course[];
  enrolledCourses: Course[];
}

interface AuthState {
  isAuth: boolean;
  usernamesAndEmails: UsernameAndEmail[] | [];
  currentUser: User | {};
  isLoading: boolean;
  error: object;
}

const signupInitialState: AuthState = {
  isAuth: false,
  usernamesAndEmails: [],
  currentUser: {},
  isLoading: false,
  error: {},
};

然后我有一个组件，我需要使用 currentUser 状态让用户创建他们的用户名（如果他们使用 google/facebook 注册）。

const { currentUser } = useSelector((state: RootState) => state.auth); 
const onSubmit = (data: FormData) => {
  dispatch(tryChangeUsername(currentUser, data));
};

但我收到错误（“{} | 用户”类型的参数不可分配给“用户”类型的参数。“{}”类型缺少“用户”类型的以下属性：id、用户名、电子邮件、社交，还有 2 个。）。我不确定我是否需要以不同的方式设置我的界面或初始状态或什么。我认为问题在于当前用户可以是一个空对象（尽管它不会在该组件中，因为该组件将是私有路由），但我不确定如何解决该问题。

标签： reactjstypescriptredux

解决方案

在使用它的属性之前，您应该检查 currentUser 是类型 User 还是 {}

function isUser(object: User | {}): object is User {
    return 'id' in object;
}

let currentUser: User | {};

if (isUser(currentUser)) {
    // make something
    currentUser.id;
}

推荐阅读