Angular 2 SimpleChanges Object throws error at first npm start

Question

In my angular 2 application there is a component containing an array of objects that is passing the chosen (clicked) one to it's direct child component. This does display the data more detailed. I'm using the "SimpleChanges" feature to watch in this child component if the object given changed to make another http request to get the related comments from a database.

If I try to build it with npm I get an error, saying :

app/displayEntry.component.ts(23,41): error TS2339: Property 'entry' does not exist on type 'SimpleChanges'

If I just comment this part out, start npm and finally put it in there again and save it, there is no Problem anymore ( no erro and it works ). My question is, is there a way to work around this behavior and can this cause any trouble later I don't foresee or should I just ignore it? Thanks for your help

Parent component:

import { Component, OnInit } from '@angular/core';
import { entry } from './Objekte/entry';
import { entryService } from './entry.service'

@Component({
templateUrl: 'app/Html_Templates/displayLastEntrys.template.html'
})

export class displayLastEntrys implements OnInit{

public entrys : entry[];
private entryChoosen: boolean;
private ChoosenEntry : entry; 

constructor ( private entryservice : entryService){
    this.entryChoosen = false;
}

ngOnInit() : void  {
    this.getData();
}

getData() {
    this.entryservice.getFirstEntrys().then(entrys => this.entrys = entrys);
}

entryClicked(ent: entry){
    this.entryChoosen = true;
    this.ChoosenEntry = ent; 
}

leaveEntry () {
    this.entryChoosen = false; 
}

voted( upordown : boolean ) {

}
}

Child component:

import { Component, Input, Injectable, OnChanges , SimpleChanges, Output,                    EventEmitter} from '@angular/core';
import { entry} from './Objekte/entry';
import { entryService } from './entry.service';
import { comment } from './Objekte/comments'; 

@Component({
selector: 'display-entry',
templateUrl: 'app/Html_Templates/displayEntry.template.html'
})

export class displayComponent implements OnChanges{
@Input() public entry : entry;
public comments : comment[];

private changecounter : number;

constructor(private service : entryService) {
    this.changecounter  = 0;
}

ngOnChanges(changes : SimpleChanges){

   this.service.getComments(changes.entry.currentValue.id)
            .then(com => this.comments = com )
            .catch();

    this.entry.viewed++;
    // To implement :: change database 
}

votedUp () : void {
    this.entry.votes ++;
    // To implement :: change database 
}

votedDown () : void  {
    this.entry.votes --;
    // To implement :: change database
}
}

Answer 1

The accepted solution is suboptimal for TypeScript, as you're defeating the type system.

SimpleChanges does not have an entry property, so the compiler quite rightly balks. The solution is to treat the changes object as an array:

ngOnChanges(changes : SimpleChanges){
  if (changes['entry']) {
    this.service.getComments(changes['entry'].currentValue.id)
  }
}

Then you can continue to strongly type the ngOnChanges method.

Answer 2

To make the compiler not complain just change your method definition for parameter one from SimpleChanges to any:

ngOnChanges(changes: any) {

//...