如何在 TypeScript 中自定义属性

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/12696250/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-09-13 16:11:06  来源:igfitidea点击:

How to customize properties in TypeScript

typescriptdefineproperty

提问by Spongman

How do I get TypeScript to emit property definitions such as:

如何让 TypeScript 发出属性定义,例如:

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

采纳答案by gaa

I was looking for exactly the same thing when I stumbled upon TypeScript Handbook: Decorators. In "Method Decorators" paragraph they define @enumerabledecorator factory, which looks like this (I'm simply copy-pasting from there):

当我偶然发现TypeScript Handbook: Decorators时,我正在寻找完全相同的东西。在“方法装饰器”段落中,他们定义了@enumerable装饰器工厂,如下所示(我只是从那里复制粘贴):

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

and they use it like this:

他们像这样使用它:

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

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

So another way of addressing it, is through usage of decorators.

所以解决它的另一种方法是使用装饰器。

PS:This feature requires experimentalDecoratorsflag to be passed to tscor set in tsconfig.json.

PS:此功能需要将experimentalDecorators标志传递给tsc或设置在tsconfig.json.

回答by Fenton

You can use getand setin TypeScript, which compile into Object.defineProperties.

你可以在 TypeScript 中使用getset,它编译成Object.defineProperties.

This is an ECMAScript 5 feature, so you can't use it if you are targeting ES3 (the default for the compiler). If you are happy to target ES5, add --target ES5to your command.

这是 ECMAScript 5 的一项功能,因此如果您的目标是 ES3(编译器的默认设置),则无法使用它。如果您愿意以 ES5 为目标,请添加--target ES5到您的命令中。

TypeScript:

打字稿:

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

Compiles to:

编译为:

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;
})();

But if you want full control of setting enumerable and configurable - you could still use the raw Object.definePropertiescode.

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

回答by Ryan Cavanaugh

This isn't currently supported if you want all the properties to be emitted like that. I'd recommend filing an issue at the CodePlex sitewith details about what your use case and requirements are.

如果您希望像这样发出所有属性,则当前不支持此功能。我建议在CodePlex 站点上提交问题,详细说明您的用例和要求是什么。

If you do compile with --target ES5, you can have something like this:

如果你用 --target ES5 编译,你可以有这样的东西:

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

Which produces this code:

产生此代码:

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;
})();