如何在TypeScript中自定义属性

Question

我如何让TypeScript发出属性定义，例如：

Object.defineProperties(this, {
    view: {
        value: view,
        enumerable: false,
        writable: false,
        configurable: false
    },
});

- Spongman

Answer 1

你可以在TypeScript中使用get和set，它们会被编译成Object.defineProperties。

这是一个ECMAScript 5的特性，所以如果你的目标是ES3（编译器的默认值），则无法使用它。如果你希望将目标设置为ES5，则需要在命令中添加--target ES5。

TypeScript:

class MyClass {
    private view;
    get View() { return this.view; }
    set View(value) { this.view = value }
}

编译成：

var MyClass = (function () {
    function MyClass() { }
    Object.defineProperty(MyClass.prototype, "View", {
        get: function () {
            return this.view;
        },
        set: function (value) {
            this.view = value;
        },
        enumerable: true,
        configurable: true
    });
    return MyClass;
})();

但是如果您想完全控制设置可枚举和可配置的选项 - 您仍然可以使用原始的 Object.defineProperties 代码。

- Fenton

---

好的...但是你如何处理这样的东西：describe('MyComponent', () => { beforeAll(() => { Object.defineProperty(window, 'matchMedia', { value: jest.fn(() => { return {matches: true}; }) }); }); }); - Phil

Answer 2

当我偶然发现TypeScript手册：装饰器时，我正在寻找完全相同的内容。在“方法装饰器”段落中，它们定义了@enumerable装饰器工厂，它看起来像这样（我只是从那里复制粘贴）：

function enumerable(value: boolean) {
    return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
        descriptor.enumerable = value;
    };
}

并且他们像这样使用它：

class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }

    @enumerable(false)
    greet() {
        return "Hello, " + this.greeting;
    }
}

因此，另一种解决方法是通过使用装饰器。

注意：这个功能需要在tsc中传递experimentalDecorators标志或在tsconfig.json中设置。

- gaa

Answer 3

如果您想要以这种方式发出所有属性，目前不支持此功能。我建议您在CodePlex网站上提交问题，并提供有关您的用例和要求的详细信息。

如果您使用 --target ES5 进行编译，可以得到类似以下的结果：

class n {
    get foo() { return 3; }
    bar() { return 5; }
}

这会生成以下代码：

var n = (function () {
    function n() { }
    Object.defineProperty(n.prototype, "foo", {
        get: function () {
            return 3;
        },
        enumerable: true,
        configurable: true
    });
    n.prototype.bar = function () {
        return 5;
    };
    return n;
})();

- Ryan Cavanaugh

---

是的，我正在寻找一种方式来自定义'可枚举'、'可配置'和'可写'属性以匹配我的现有代码。 - Spongman