cant use setter on a class members

[itayod]

typescript version: 2.3.3

Code

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'elevator',
  templateUrl: './elevator.component.html',
  styleUrls: ['./elevator.component.scss']
})
export class ElevatorComponent implements OnInit {
  @Input() floor: number;

  constructor() { }

  set floor(value){

  }

}

Expected behavior:
I expect to be able to use setter on the floor member

Actual behavior:
I get this error: Duplicate identifier 'floor'. !!!!

[sylvanaar]

Make the name of the field different than the property.

[itayod]

Actually I wanted to use the setter for change detection...
if i change the name of the field I won't be able to do that,
I mean i can do that with ngOnChanges but I think using a setter is much more elegant.

[kitsonk]

@itayod that is not how JavaScript, and therefore TypeScript works. You cannot have a value property and a setter property of the same name. You can have a getter and setter that reads and sets a value from another property, or you can have a value property, not both.

This is fairly basic JavaScript, and these sorts of questions should be asked on Gitter or StackOverflow. As how to implement the @Input decorator with a setter and a getter, you would need to discuss it in an Angular 2 forum. This is not a TypeScript issue, it is preventing you from creating invalid JavaScript.

[itayod]

Thanks for the answer,

This is an es5 class with class member and a setter,
basically this is what i wanted to do with my angular component to detect a change in my member:

var Class = function() {
	this.member = 'member'
}
Class.prototype = {
	set member(val) {
  	console.log('member changed')
  }
}
var c = new Class();
c.member = 'member2';

[kitsonk]

Don't redeclare the member... a setter is sufficient (though TypeScript doesn't model write only properties, which is what you are creating). All TypeScript does anyways is move any intializers to the constructor anyways:

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'elevator',
  templateUrl: './elevator.component.html',
  styleUrls: ['./elevator.component.scss']
})
export class ElevatorComponent implements OnInit {

  constructor() {
      this.floor = 2;
  }

  @Input set floor(value){

  }

}

[itayod]

Ok, so I guess that the problem is the decorator as you said.

Thanks.

[kitsonk]

The property descriptor is passed to decorator, so the decorator could support a setter only property, but the would be, as you imply, an ng2 thing.