Monday, 2 May 2016

get and set in TypeScript



I'm trying to create get and set method for a property:



private _name: string;

Name() {
get:
{

return this._name;
}
set:
{
this._name = ???;
}
}


What's the keyword to set a value?



Answer



TypeScript uses getter/setter syntax that is like ActionScript3.



class foo {
private _bar: boolean = false;
get bar(): boolean {
return this._bar;
}
set bar(value: boolean) {
this._bar = value;

}
}


That will produce this JavaScript, using the ECMAScript 5 Object.defineProperty() feature.



var foo = (function () {
function foo() {
this._bar = false;
}

Object.defineProperty(foo.prototype, "bar", {
get: function () {
return this._bar;
},
set: function (value) {
this._bar = value;
},
enumerable: true,
configurable: true
});

return foo;
})();


So to use it,



var myFoo = new foo();
if(myFoo.bar) { // calls the getter
myFoo.bar = false; // calls the setter and passes false
}



However, in order to use it at all, you must make sure the TypeScript compiler targets ECMAScript5. If you are running the command line compiler, use --target flag like this;



tsc --target ES5



If you are using Visual Studio, you must edit your project file to add the flag to the configuration for the TypeScriptCompile build tool. You can see that here:



As @DanFromGermany suggests below, if your are simply reading and writing a local property like foo.bar = true, then having a setter and getter pair is overkill. You can always add them later if you need to do something, like logging, whenever the property is read or written.


No comments:

Post a Comment

c++ - Does curly brackets matter for empty constructor?

Those brackets declare an empty, inline constructor. In that case, with them, the constructor does exist, it merely does nothing more than t...