Typescript 使用状态联合类型

Question

我有这种联合类型：

export interface IUserInfosLogin {
  usernameOrEmail: string;
  password: string;
}

export interface IUserInfosRegister {
  username: string;
  email: string;
  password: string;
  passwordConfirm: string;
}

export type TUserInfos = IUserInfosLogin | IUserInfosRegister;

而且我希望const [userInfos, setUserInfos] = useState<TUserInfos>{}只采用其中一种类型，但是当我尝试访问userInfos时，只有password可用。

有人可以向我解释吗？

Answer 1

否则，您将需要一个歧视联盟，对于 TypeScript 它可以是一个或另一个，因此它只识别它们共享的内容，在您的情况下为password 。 请注意，两者都添加了type ：

export interface IUserInfosLogin {
  type:"login";
  usernameOrEmail: string;
  password: string;
}

export interface IUserInfosRegister {
  type:"register"
  username: string;
  email: string;
  password: string;
  passwordConfirm: string;
}

export type TUserInfos = IUserInfosLogin | IUserInfosRegister;

您需要进行类型检查才能拥有一个或另一个：

if(userInfo.type === "login"{
  // you can access IUserInfosLogin properties here
}else{
 // you can access IUserInfosRegister properties here
}