title: Conditional Interface - TS & Angular
body: <p>I have a user component that has a variable named user: Employee | Student; In my HTML I have an element <h5>{{ user.coure ?? user.department }}</h5></p>
  <p>Now I'm getting an error in my HTML since some properties in Employee are not available on Student interface. I don't want to use &quot;any&quot; type or have different variables e.g. student and employee. What is the best way?</p>
  <p>Example of the interface that I'm using:</p>
  <pre><code>// user.interface.ts
  export BaseUser {
      id: number;
      firstName: string;
      middleName: string;
  }
  
  export Employee extends BaseUser {
      department: string;
  }
  
  export Student extends BaseUser {
      course: string;
  }
  </code></pre>