web-dev-qa-db-ja.com

typeScriptで取得および設定

プロパティのgetメソッドとsetメソッドを作成しようとしています。

private _name: string;

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

値を設定するためのキーワードは何ですか?

470
MuriloKunze

TypeScriptは、ActionScript 3のようなgetter/setter構文を使用します。

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

Ecmascript 5のObject.defineProperty()機能を使用して、このJavascriptを生成します。

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

それを使うために

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

ただし、それを使用するには、TypeScriptコンパイラがECMAScript 5をターゲットにしていることを確認する必要があります。コマンドラインコンパイラを実行している場合は、このように--targetフラグを使用します。

tsc - ターゲットES5

Visual Studioを使用している場合は、TypeScriptCompileビルドツールの設定にフラグを追加するようにプロジェクトファイルを編集する必要があります。あなたはそれを見ることができます ここ

以下で@DanFromGermanyが示唆しているように、あなたが単にfoo.bar = trueのようなローカルプロパティを読み書きしているならば、セッターとゲッターのペアを持つことはやり過ぎです。プロパティが読み書きされるときはいつでも、ロギングのような何かをする必要があるなら、いつでも後でそれらを追加することができます。

784
Ezward

Ezwardはすでに良い答えを出していますが、私はコメントの1つがそれがどのように使われているかを尋ねていることに気づきました。この質問に出くわす私のような人たちにとって、TypeScriptウェブサイトのゲッターとセッターに関する公式文書へのリンクを持っていると便利だと思いました。作成し、使用例を示します。

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

特に、それに慣れていない人のために、あなたはゲッターへの呼び出しにWordの 'get'を組み入れないことに注意してください(そして同様にセッターのために):

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

あなたは単にこれをするべきです:

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

以下のようなクラスが与えられます。

class foo {
  private _bar:boolean = false;

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

それから、プライベートな '_bar'プロパティの 'bar'ゲッターが呼び出されます。

79
TornadoAli

これは正しい方向を示すべき実用的な例です。

class Foo {
    _name;

    get Name() {
        return this._name;
    }

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

JavaScriptのゲッターとセッターは単なる通常の関数です。セッターは、設定されている値を値とするパラメータを受け取る関数です。

43
Brian Terlson

これを書くことができます

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

}
3
k33g_org

これは、一般的なメソッドを作成するのと非常によく似ています。単にキーワードreserved getまたはsetを先頭に置くだけです。

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() {のreturn型を飛ばすことができます

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

TSは、オブジェクトプロパティがオブジェクトのアクセス方法(ゲッター)または更新方法(セッター)外部をより詳細に制御できるゲッターとセッターを提供します。プロパティに直接アクセスまたは更新する代わりに、プロキシ関数が呼び出されます。

例:

class Person {
    constructor(name: string) {
        this._name = name;
    }

    private _name: string;

    get name() {
        return this._name;
    }

    // first checks the length of the name and then updates the name.
    set name(name: string) {
        if (name.length > 10) {
            throw new Error("Name has a max length of 10");
        }

        this._name = name;  
    }

    doStuff () {
        this._name = 'foofooooooofoooo';
    }


}

const person = new Person('Willem');

// doesn't throw error, setter function not called within the object method when this._name is changed
person.doStuff();  

// throws error because setter is called and name is longer than 10 characters
person.name = 'barbarbarbarbarbar';  
0

私はおそらくそれがそんなに混乱するのか私はおそらく思うと思います。あなたの例では、私たちは_nameのためのゲッターとセッターが欲しいです。しかし、これを実現するには、無関係のクラス変数Nameのゲッターとセッターを作成します。

このことを考慮:

class Car{
    private tiresCount = 4;
    get yourCarTiresCount(){
        return this.tiresCount ;
    }
    set yourCarTiresCount(count) {
        alert('You shouldn't change car tire count')
    }
}

上記のコードは次のようになります。

  1. getsetは、yourCarTiresCountのgetterとsetterを作成します(tiresCountではなく)。

ゲッターは:

function() {
    return this.tiresCount ;
}

そして設定者は:

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

つまり、new Car().yourCarTiresCountを実行するたびに、ゲッターが実行されます。そしてすべてのnew Car().yourCarTiresCount('7')セッターが実行されます。

  1. 間接的 private tireCountに対して/ getterを作成するが、setterは作成しない。
0
dasfdsa