JSX 中的 TypeScript 类型断言

Question

How can I assert that the profile is UserProfileForAdmin type only inside the isAdmin JSX area to display the phone number only for the admins.

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;

Currently it gives the error

TS2339: Property 'phone' does not exist on type 'Profile | UserProfileForAdmin'. Property 'phone' does not exist on type 'Profile'.

Answer 1

It seems like this type is wrong:

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

According to that type, isAdmin could be true , and profile could have a type that does not have a phone .

So I'm guessing that what you want is that a profile can only can a UserProfileForAdmin if isAdmin is true . If so, then you need to show that in your types.

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

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

export type HomeSingleProfileProps = UserProfileProps | AdminProfileProps

Here HomeSingleProfileProps is now one of two possibilities. It's either an an admin with an admin profile with a phone , or it's not an admin and it has a profile without a `phone.

See playground for working example