title: TypeScript Type Assertion in JSX
body: <p>How can I assert that the profile is UserProfileForAdmin type only inside the <code>isAdmin</code> JSX area to display the phone number only for the admins.</p>
  <pre><code>import { View, Text } from &quot;react-native&quot;;
  
  interface Profile {
    name: string;
  }
  
  interface UserProfileForAdmin extends Profile {
    phone: string;
  }
  
  export interface HomeSingleProfileProps {
    profile: Profile | UserProfileForAdmin;
    isAdmin: boolean;
  }
  
  const SingleProfile = (props: HomeSingleProfileProps) =&gt; {
    return (
      &lt;View&gt;
        &lt;Text&gt;
          {props.isAdmin ? (
            &lt;&gt;
              {props.profile.phone}
            &lt;/&gt;
          ) : (
            &lt;&gt;
              {props.profile.name}
            &lt;/&gt;
          )}
        &lt;/Text&gt;
      &lt;/View&gt;
    );
  };
  
  export default SingleProfile;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/omKXZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/omKXZ.png" alt="enter image description here" /></a></p>
  <p>Currently it gives the error</p>
  <blockquote>
  <p>TS2339: Property 'phone' does not exist on type 'Profile | UserProfileForAdmin'.   Property 'phone' does not exist on type 'Profile'.</p>
  </blockquote>
  <p><strong>Edit:</strong>
  Is there any solution to assert the type from the following code?</p>
  <pre><code>import { View, Text } from &quot;react-native&quot;;
  
  interface Profile {
    name: string;
  }
  
  interface UserProfileForAdmin extends Profile {
    phone: string;
  }
  
  export interface HomeSingleProfileProps {
    profile: Profile | UserProfileForAdmin;
  }
  
  const SingleProfile = (props: HomeSingleProfileProps) =&gt; {
    // logic to determine if the current user is admin or not
    const isAdmin = checkIfUserIsAdmin(user); // might be true or false
  
    return (
      &lt;View&gt;
        &lt;Text&gt;
          {props.isAdmin ? (
            &lt;&gt;
              {props.profile.phone}
            &lt;/&gt;
          ) : (
            &lt;&gt;
              {props.profile.name}
            &lt;/&gt;
          )}
        &lt;/Text&gt;
      &lt;/View&gt;
    );
  };
  
  export default SingleProfile;
  </code></pre>