The lowly Interface

We want to hook up window resize events easily. So we create this function.

import { Subject } from 'rxjs';
interface wh {
  width: string;
  height: string;
}
const sub = new Subject<wh>();
export function _resizeEvent(): Subject<wh> {
  debugger;
  window.addEventListener('resize', (ev) => {
    let window = ev.target as Window;
    let ele = window.document.activeElement as HTMLElement;
    let width = ele.offsetWidth.toString();
    let height = ele.offsetHeight.toString();
    sub.next({ width: width, height: height });
  });
  return sub;
}

To use the code above:

import { _resizeEvent } from './functions/observers';

_resizeEvent().subscribe(result=>{
       this.width=result.width;
    }); 

Intellisense now shows us both properties as we type.

Note that interface definitions, unlike class definitions do not support the new keyword. This is pretty much the only difference between the two.