在TypeScript中获取和设置


get and set in TypeScript

我正在尝试为属性创建get和set方法：

1
2
3
4
5
6
7
8
9
10
11
12
private _name: string;

Name() {
    get:
    {
        return this._name;
    }
    set:
    {
        this._name = ???;
    }
}

设置值的关键字是什么？

相关讨论

typescript使用类似于actionscript3的getter/setter语法。

1
2
3
4
5
6
7
8
9
class foo {
    private _bar:boolean = false;
    get bar():boolean {
        return this._bar;
    }
    set bar(theBar:boolean) {
        this._bar = theBar;
    }
}

这将使用ecmascript 5 object.defineproperty()功能生成此javascript。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var foo = (function () {
    function foo() {
        this._bar = false;
    }
    Object.defineProperty(foo.prototype,"bar", {
        get: function () {
            return this._bar;
        },
        set: function (theBar) {
            this._bar = theBar;
        },
        enumerable: true,
        configurable: true
    });
    return foo;
})();

所以使用它，

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

但是，为了使用它，必须确保typescript编译器以ecmascript5为目标。如果您正在运行命令行编译器，请使用--target标志，如下所示；

TSC——目标ES5

如果使用的是Visual Studio，则必须编辑项目文件，以便将标志添加到TypeScriptCompile生成工具的配置中。你可以在这里看到：

正如@danfromgermany下面建议的那样，如果您只是简单地读写一个本地属性，比如foo.bar=true，那么拥有setter和getter对就太过分了。如果需要执行某些操作(如日志记录)，则可以在以后每次读取或写入属性时添加它们。

相关讨论

Ezward已经提供了一个很好的答案，但是我注意到其中一条评论询问了它是如何使用的。对于像我这样遇到这个问题的人来说，我认为有一个到typescript网站上getter和setter的官方文档的链接是很有用的，因为它很好地解释了这一点，希望在做出更改时始终保持最新，并显示示例用法：

http://www.typescriptlang.org/docs/handbook/classes.html网站

特别是，对于不熟悉它的人，请注意不要在对getter的调用中使用"get"这个词(对于setter也是如此)：

1
2
var myBar = myFoo.getBar(); // wrong    
var myBar = myFoo.get('bar');  // wrong

您只需执行以下操作：

1
2
var myBar = myFoo.bar;  // correct (get)
myFoo.bar = true;  // correct (set) (false is correct too obviously!)

给一个类，比如：

1
2
3
4
5
6
7
8
9
10
class foo {
  private _bar:boolean = false;

  get bar():boolean {
    return this._bar;
  }
  set bar(theBar:boolean) {
    this._bar = theBar;
  }
}

然后将调用私有的"bar"属性的"bar"getter。

相关讨论

下面是一个可以为您指明正确方向的工作示例：

1
2
3
4
5
6
7
8
9
10
11
class Foo {
    _name;

    get Name() {
        return this._name;
    }

    set Name(val) {
        this._name = val;
    }
}

javascript中的getter和setter只是普通函数。setter是一个函数，它接受一个值为所设置值的参数。

相关讨论

你可以写这个

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
class Human {
    private firstName : string;
    private lastName : string;

    constructor (
        public FirstName?:string,
        public LastName?:string) {

    }

    get FirstName() : string {
        console.log("Get FirstName :", this.firstName);
        return this.firstName;
    }
    set FirstName(value : string) {
        console.log("Set FirstName :", value);
        this.firstName = value;
    }

    get LastName() : string {
        console.log("Get LastName :", this.lastName);
        return this.lastName;
    }
    set LastName(value : string) {
        console.log("Set LastName :", value);
        this.lastName = value;
    }

}
相关讨论

它与创建常用方法非常相似，只需在开头放上关键字reserved get或set。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
class Name{
    private _name: string;

    getMethod(): string{
        return this._name;
    }

    setMethod(value: string){
        this._name = value
    }

    get getMethod1(): string{
        return this._name;
    }

    set setMethod1(value: string){
        this._name = value
    }
}

class HelloWorld {

    public static main(){

        let test = new Name();

        test.setMethod('test.getMethod() --- need ()');
            console.log(test.getMethod());

        test.setMethod1 = 'test.getMethod1 --- no need (), and used = for set ';
            console.log(test.getMethod1);
    }
}
HelloWorld.main();

在这种情况下，可以跳过get getMethod1() {中的返回类型。

1
2
3
    get getMethod1() {
        return this._name;
    }

我想我可能明白为什么它如此混乱。在您的示例中，我们需要_name的getter和setter。但我们通过为不相关的类变量Name创建getter和setter来实现这一点。

考虑一下：

1
2
3
4
5
6
7
8
9
class Car{
    private tiresCount = 4;
    get yourCarTiresCount(){
        return this.tiresCount ;
    }
    set yourCarTiresCount(count) {
        alert('You shouldn't change car tire count')
    }
}

以上代码如下：

  • get和set为yourCarTiresCount创建getter和setter(不为tiresCount创建)。

    • 吸气剂是：

    1
    2
    3
    function() {
        return this.tiresCount ;
    }

    设定者是：

    1
    2
    3
    function(count) {
        alert('You shouldn't change car tire count');
    }

    也就是说，每次我们执行new Car().yourCarTiresCount时，getter都会运行。每运行一个new Car().yourCarTiresCount('7')setter。

  • 间接地为私有tireCount创建getter，而不是setter。

    • 如果您正在使用typescript模块并尝试添加导出的getter，则可以执行以下操作：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    // dataStore.ts
    export const myData: string = undefined;  // just for typing support
    let _myData: string;  // for memoizing the getter results

    Object.defineProperty(this,"myData", {
        get: (): string => {
            if (_myData === undefined) {
                _myData ="my data";  // pretend this took a long time
            }

            return _myData;
        },
    });

    然后，在另一个文件中，您有：

    1
    2
    import * as dataStore from"./dataStore"
    console.log(dataStore.myData); //"my data"
    相关讨论