How to create value properties in TypeScript

Question

TypeScript has a built in feature for defining accessor properties

class Test {
    constructor(private value: number = 123) {
    }

    public get Value(): number {
        return this.value;
    }

    public set Value(value: number) {
        this.value = value;
    }
}

Compiler output

var Test = (function () {
    function Test(value) {
        if (value === void 0) { value = 123; }
        this.value = value;
    }
    Object.defineProperty(Test.prototype, "Value", {
        get: function () {
            return this.value;
        },
        set: function (value) {
            this.value = value;
        },
        enumerable: true,
        configurable: true
    });
    return Test;
})();

JavaScript also supports value properties

Object.defineProperty(someObj, "MyValueProperty", {
    // The key here is value as opposed to get and set.
    value: 5
    enumerable: true,
    configurable: false
});

How do you define value propertes with TypeScript?

NOTICE: I notice that I'm being pointed to another stackoverflow question regarding TypeScript getters and setters. This is not what I want. I want to know how to create properties that implement value, not get and set!

@Martin - I've already demonstrated the ability to use getters and setters. See my notice. I didn't see anything about value implementation in your link — Matthew Layton
– Matthew Layton, Commented Nov 26, 2014 at 16:48

David Sherret · Accepted Answer · 2016-10-25 14:53:22Z

3

You could do the following:

class Test {
    Value : number;
}

Object.defineProperty(Test.prototype, "Value", {
    value: 5,
    enumerable: true,
    configurable: false
});

var t = new Test();
t.Value = 54;
console.log(t.Value); // 5

But why not just return the value in the get function?

class Test {
    public get Value(): number {
        return 5;
    }
}

var t = new Test();
t.Value = 54;
console.log(t.Value); // 5

Using Decorators

A more elegant way if you really want a value property is to create a reusable decorator:

function ValueProperty(value: any) {
    return (target: Object, propertyKey: string) => {
        Object.defineProperty(target, propertyKey, {
            value,
            enumerable: true,
            configurable: false
        });
    };
}

Then to use it:

class Test {
    @ValueProperty(5)
    Value: number;
}

new Test().Value; // 5

edited Oct 25, 2016 at 14:53

answered Nov 26, 2014 at 18:03

David Sherret

108k28 gold badges197 silver badges190 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Faris Zacina · Accepted Answer · 2014-11-26 17:04:44Z

1

Typescript does not support that currently. Looking at the language specification and the Emitter class of the typescript compiler i couldn't find anything indicating that value properties are supported.

https://github.com/Microsoft/TypeScript/blob/9a89147587c06ba51181ff2ee5ade69a98b171ea/src/services/compiler/emitter.ts#L2402

I guess that your only option is to use raw Javascript and Object.defineProperty to define them.

answered Nov 26, 2014 at 17:04

Faris Zacina

14.3k8 gold badges64 silver badges76 bronze badges

Collectives™ on Stack Overflow

How to create value properties in TypeScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related