get und set in TypeScript

Question

Ich versuche, 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, um einen Wert zu setzen?

Answer 1

TypeScript verwendet eine Getter/Setter-Syntax, die mit ECMAScript4/ActionScript3 vergleichbar ist.

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

Um es jedoch überhaupt verwenden zu können, müssen Sie sicherstellen, dass der TypeScript-Compiler ECMAScript5 oder höher unterstützt. Wenn Sie den Befehlszeilen-Compiler verwenden, benutzen Sie --target Flagge wie diese;

tsc --target ES5

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

Das erzeugt dieses JavaScript, das ECMAScript 5 verwendet Object.defineProperty() Funktion.

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

Neuere Versionen von EcmaScript erzeugen Code, der dem ursprünglichen TypeScript ähnlicher ist. Wenn Sie zum Beispiel EcmaScript2017 anvisieren, wird der Code erzeugt:

"use strict";
class foo {
    constructor() {
        this._bar = false;
    }
    get bar() {
        return this._bar;
    }
    set bar(value) {
        this._bar = value;
    }
}

Um es zu benutzen,

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

Wie @DanFromGermany weiter unten vorschlägt, sollten Sie einfach eine lokale Eigenschaft lesen und schreiben wie foo.bar = true dann ist ein Setter- und Getter-Paar ein Overkill. Sie können sie immer später hinzufügen, wenn Sie etwas tun müssen, wie die Protokollierung, wenn die Eigenschaft gelesen oder geschrieben wird.

Getter können verwendet werden, um schreibgeschützte Eigenschaften zu implementieren. Hier ist ein Beispiel, das auch zeigt, wie Getter mit Readonly- und optionalen Typen interagieren.

//
// type with optional readonly property.
// baz?:string is the same as baz:string|undefined
//
type Foo = {
    readonly bar: string;
    readonly baz?: string;
}
const foo:Foo = {bar: "bar"}
console.log(foo.bar) // prints 'bar'
console.log(foo.baz) // prints undefined

//
// interface with optional readonly property
//
interface iFoo {
    readonly bar: string;
    readonly baz?: string;
}

const ifoo:iFoo = {bar: "bar"}
console.log(ifoo.bar)  // prints 'bar'
console.log(ifoo.baz)  // prints undefined

//
// class implements bar as a getter, 
// but leaves off baz.
//
class iBarClass implements iFoo {

    get bar() { return "bar" }
}
const iBarInstance = new iBarClass()
console.log(iBarInstance.bar) // prints 'bar'
console.log(iBarInstance.baz) // prints 'undefined'
// accessing baz gives warning that baz does not exist 
// on iBarClass but returns undefined
// note that you could define baz as a getter
// and just return undefined to remove the warning.

//
// class implements optional readonly property as a getter
//
class iBazClass extends iBarClass {
    private readonly _baz?: string

    constructor(baz?:string) {
        super()
        this._baz = baz
    }

    get baz() { return this._baz; }
}

const iBazInstance = new iBazClass("baz")
console.log(iBazInstance.bar)  // prints bar
console.log(iBazInstance.baz)  // prints baz

Answer 2

Ezward hat bereits eine gute Antwort gegeben, aber mir ist aufgefallen, dass in einem der Kommentare die Frage gestellt wurde, wie es verwendet wird. Für Leute wie mich, die über diese Frage stolpern, dachte ich, es wäre nützlich, einen Link zur offiziellen Dokumentation über Getter und Setter auf der Typescript-Webseite zu haben, da diese es gut erklärt, hoffentlich immer aktuell bleibt, wenn Änderungen vorgenommen werden, und Beispiele für die Verwendung zeigt:

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

Insbesondere für diejenigen, die damit nicht vertraut sind, ist zu beachten, dass Sie das Wort "get" nicht in einen Aufruf eines Getters einbauen (und das Gleiche gilt 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!)

eine Klasse wie gegeben:

class foo {
  private _bar:boolean = false;

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

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

Answer 3

Hier ist ein Beispiel, das Ihnen die richtige Richtung weist:

class Foo {
    _name;

    get Name() {
        return this._name;
    }

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

Getter und Setter in JavaScript sind ganz normale Funktionen. Der Setter ist eine Funktion, die einen Parameter annimmt, dessen Wert der einzustellende Wert ist.

Answer 4

Sie können Folgendes 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;
    } 

}

Answer 5

TS bietet Getter und Setter, mit denen Objekteigenschaften besser kontrolliert werden können, wie auf sie zugegriffen (Getter) oder sie aktualisiert werden (Setter). außerhalb des Objekts. Anstatt direkt auf die Eigenschaft zuzugreifen oder sie 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';