title: Typescript make variable act as pointer to another variable
body: <p>Lets say I have some component:</p>
  
  <pre><code>@Component({
      selector: 'my-view',
      templateUrl: './view.component.html',
      styleUrls: ['./view.component.scss']
  })
  
  export class ViewComponent implements OnInit {
      // used to alias the actual user data, set with OnInit
      private plan: string;
      private status: string;
      private started: string;
      private cycle: string;
  
      constructor (private auth: Auth, private modal: Modal, private router: Router) {}
  
      ngOnInit(): void {
          // without these shorthand names the components code would be messy and unreadable
          this.plan = this.auth.userProfile.user_metadata.plan;
          this.status = this.auth.userProfile.user_metadata.token.status;
          this.started = this.auth.userProfile.user_metadata.token.epoch;
          this.cycle = this.auth.userProfile.user_metadata.cycle;
  
          // do stuff using alias variables so I don't have to use extremely long names
          if(this.plan === .... &amp;&amp; this.cycle === ...) {
  
          }
      }
  }
  </code></pre>
  
  <p>This scenario allows me to use much shorter and simpler variable names instead of the long names I would normally use to access user data, <strong>But</strong> this breaks when the user data is updated while on this page.</p>
  
  <p>Since the alias variables are only set during <code>onInit</code>, when a change to the user data occurs these variables don't reflect that change and the user would need to refresh the whole page to see the change.</p>
  
  <p>Is there any way to easily do something like this, but have the variables like <code>plan, status, started, cycle</code> observe the original value and update accordingly? Otherwise I'd need to use the long names and sacrifice the readability of my code.</p>