RxJs / Typescript throws 'property clientX does not exist on type {}'

Question

I am trying to do something very simple, just log the event.clientX on mouseover, and this is the module code:

import { Observable, Subject } from 'rxjs';
import StarSky from './starsky';
import constants from '../constants/index';

const HERO_Y = constants.HERO_Y(StarSky.canvas);

export const StarShip = Observable.fromEvent(StarSky.canvas,'mousemove')
  .map((event)=> {
    return {
      x: event.clientX,
      y: HERO_Y
    }
  })
  .startWith({
    x: StarSky.canvas.width /2,
    y: HERO_Y
  })

Then I subscribe to it later, likeso:

StarShip.subscribe(x =>  console.log(x));

What is happening is that typescript compiler keeps throwing an error of this particular kind:

Property clientX does not exist on type {}

I am guessing because its still an empty Rx Subject, and clientX is not yet still there as it needs to be initialised via mouseover. This is kind of silly because if I remove .clientX, and leave event there as x, it logs out with no problems.

How to combat this incompatibility and work around this error?

EDIT:

I am sorry, just found out that the solution is to put type declaration

(event: MouseEvent) => { ... }

Just like this.

Answer 1

'property clientX does not exist on type {}'

This is because the observable is not typed:

Observable.fromEvent(StarSky.canvas,'mousemove')

You can add an annotation as a generic param:

Observable.fromEvent<MouseEvent>(StarSky.canvas,'mousemove')

Or the callback as you have done.