JSX 中的 TypeScript 类型断言

Question

我如何断言配置文件是仅在 isAdmin JSX 区域内的 UserProfileForAdmin 类型，以便仅为管理员显示电话号码。

import { View, Text } from "react-native";

interface Profile {
  name: string;
}

interface UserProfileForAdmin extends Profile {
  phone: string;
}

export interface HomeSingleProfileProps {
  profile: Profile | UserProfileForAdmin;
  isAdmin: boolean;
}

const SingleProfile = (props: HomeSingleProfileProps) => {
  return (
    <View>
      <Text>
        {props.isAdmin ? (
          <>
            {props.profile.phone}
          </>
        ) : (
          <>
            {props.profile.name}
          </>
        )}
      </Text>
    </View>
  );
};

export default SingleProfile;

目前它给出了错误

TS2339：“配置文件 | 类型”中不存在属性“电话” UserProfileForAdmin'。 “配置文件”类型上不存在属性“电话”。

编辑： 有没有办法从下面的代码中断言类型？

import { View, Text } from "react-native";

interface Profile {
  name: string;
}

interface UserProfileForAdmin extends Profile {
  phone: string;
}

export interface HomeSingleProfileProps {
  profile: Profile | UserProfileForAdmin;
}

const SingleProfile = (props: HomeSingleProfileProps) => {
  // logic to determine if the current user is admin or not
  const isAdmin = checkIfUserIsAdmin(user); // might be true or false

  return (
    <View>
      <Text>
        {props.isAdmin ? (
          <>
            {props.profile.phone}
          </>
        ) : (
          <>
            {props.profile.name}
          </>
        )}
      </Text>
    </View>
  );
};

export default SingleProfile;

Answer 1

好像这个类型不对：

export interface HomeSingleProfileProps {
  profile: Profile | UserProfileForAdmin;
  isAdmin: boolean;
}

根据该类型，isAdmin 可以是true，而profile 的类型可能没有有phone。

所以我猜你想要的是profile 只能是UserProfileForAdmin 如果isAdmin 是true。如果是这样，那么您需要在您的类型中显示这一点。

interface UserProfileProps {
  profile: Profile;
  isAdmin: false;  
}

export interface AdminProfileProps {
  profile: UserProfileForAdmin;
  isAdmin: true;
}

export type HomeSingleProfileProps = UserProfileProps | AdminProfileProps

这里HomeSingleProfileProps 现在是两种可能性之一。要么是管理员，管理员配置文件为 phone，要么不是管理员，配置文件没有“电话”。

See playground for working example