Angular: how to check the data type of a component property?

Question

JavaScript

"@angular/core": "^4.0.0"
"typescript": "~2.3.3"

@Component({
  selector: 'app-parent',
  template: `<app-child [data]="test"></app-child>`
})
export class ParentComponent {

  test: number = 123;
}

/*******/

class Test {
  name: string
}

@Component({
  selector: 'app-child',
  template: `<div>{{data.name}}</div>`,
})
export class ChildComponent {

  @Input() data: Test;
}

Why doesn't ChildComponent complain that the data property is not of the Test data type?
How can typescript or angular check the incoming properties of a component?

Answer 1

The typescript compiler doesn't process component templates, so we won't get an error when compiling. As a workaround, I can suggest the following - convert data to properties and check the incoming type in the set method already at runtime. Or write your own decorator that will check incoming value types in a declarative style.