Holen Sie sich und setzen Sie in TypeScript

Ich versuche, eine get- und set-Methode für eine Eigenschaft zu erstellen:

private _name: string;

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

Wie lautet das Schlüsselwort zum Festlegen eines Werts?

TypeScript verwendet eine Getter / Setter-Syntax, die ActionScript3 ähnelt.

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

Dadurch wird dieses JavaScript mithilfe der ECMAScript 5- Object.defineProperty()Funktion erstellt.

var foo = (function () {
    function foo() {
        this._bar = false;
    }
    Object.defineProperty(foo.prototype, "bar", {
        get: function () {
            return this._bar;
        },
        set: function (value) {
            this._bar = value;
        },
        enumerable: true,
        configurable: true
    });
    return foo;
})();

Also, um es zu benutzen,

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

Um es überhaupt verwenden zu können, müssen Sie jedoch sicherstellen, dass der TypeScript-Compiler auf ECMAScript5 abzielt. Wenn Sie den Befehlszeilen-Compiler ausführen, verwenden Sie das folgende --targetFlag.

tsc --target ES5

Wenn Sie Visual Studio verwenden, müssen Sie Ihre Projektdatei bearbeiten, um der Konfiguration für das TypeScriptCompile-Build-Tool das Flag hinzuzufügen. Das können Sie hier sehen :

Wie @DanFromGermany unten vorschlägt, foo.bar = trueist es übertrieben, ein Setter-Getter-Paar zu haben , wenn Sie einfach eine lokale Eigenschaft wie lesen und schreiben . Sie können sie später jederzeit hinzufügen, wenn Sie etwas tun müssen, z. B. Protokollierung, wenn die Eigenschaft gelesen oder geschrieben wird.

Ezward hat bereits eine gute Antwort gegeben, aber ich habe festgestellt, dass in einem der Kommentare gefragt wird, wie es verwendet wird. Für Leute wie mich, die über diese Frage stolpern, hielt ich es für nützlich, einen Link zur offiziellen Dokumentation über Getter und Setter auf der Typescript-Website zu haben, da dies dies gut erklärt und hoffentlich immer auf dem neuesten Stand bleibt, wenn Änderungen vorgenommen werden gemacht und zeigt Beispielverwendung:

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

Beachten Sie insbesondere für diejenigen, die nicht damit vertraut sind, dass Sie das Wort "get" nicht in einen Aufruf an einen Getter einbinden (und ähnlich für Setter):

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

Sie sollten dies einfach tun:

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

gegeben eine Klasse wie:

class foo {
  private _bar:boolean = false;

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

dann wird der 'bar'-Getter für die private' _bar'-Eigenschaft aufgerufen.

Hier ist ein Arbeitsbeispiel, das Sie in die richtige Richtung weisen sollte:

class Foo {
    _name;

    get Name() {
        return this._name;
    }

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

Getter und Setter in JavaScript sind nur normale Funktionen. Der Setter ist eine Funktion, die einen Parameter verwendet, dessen Wert der eingestellte Wert ist.

Du kannst das schreiben

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

}

TS bietet Getter und Setter, mit denen Objekteigenschaften mehr Kontrolle darüber haben, wie auf sie außerhalb des Objekts zugegriffen (Getter) oder sie aktualisiert (Setter) werden. Anstatt direkt auf die Eigenschaft zuzugreifen oder diese zu aktualisieren, wird eine Proxy-Funktion aufgerufen.

Beispiel:

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

Es ist dem Erstellen gängiger Methoden sehr ähnlich. Setzen Sie einfach das Schlüsselwort reserviert getoder setam Anfang.

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

In diesem Fall können Sie die Rückgabe eingeben get getMethod1() {

    get getMethod1() {
        return this._name;
    }

Ich denke, ich verstehe wahrscheinlich, warum es so verwirrend ist. In Ihrem Beispiel wollten wir Getter und Setter für _name. Dies erreichen wir jedoch, indem wir Getter und Setter für eine nicht verwandte Klassenvariable erstellen Name.

Bedenken Sie:

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

Der obige Code bewirkt Folgendes:

1. getund seterstelle Getter und Setter für yourCarTiresCount( nicht fürtiresCount ).

Der Getter ist:

function() {
    return this.tiresCount ;
}

und der Setter ist:

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

Das heißt, jedes Mal, wenn wir es tun new Car().yourCarTiresCount, läuft Getter. Und für jeden new Car().yourCarTiresCount('7')Setter läuft.

2. Indirekt erstellen Sie Getter, aber nicht den Setter für private Zwecke tireCount.

Wenn Sie nach einer Möglichkeit suchen, get und set für ein Objekt (keine Klasse) zu verwenden, Proxy kann dies hilfreich sein: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy

const target = {
  message1: "hello",
  message2: "everyone"
};

const handler3 = {
  get: function (target, prop, receiver) {
    if (prop === "message2") {
      return "world";
    }
    return Reflect.get(...arguments);
  },
};

const proxy3 = new Proxy(target, handler3);

console.log(proxy3.message1); // hello
console.log(proxy3.message2); // world

Hinweis: Beachten Sie, dass dies eine neue API ist, die nicht unterstützt wird und für ältere Browser erforderlich ist

Wenn Sie mit TypeScript-Modulen arbeiten und versuchen, einen exportierten Getter hinzuzufügen, können Sie Folgendes tun:

// 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;
    },
});

Dann haben Sie in einer anderen Datei:

import * as dataStore from "./dataStore"
console.log(dataStore.myData); // "my data"