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

TS bietet Getter und Setter, die es Objekteigenschaften ermöglichen, mehr Kontrolle darüber zu haben, wie sie zugegriffen werden (Getter) oder aktualisiert werden (Setter) außerhalb des Objekts. Anstelle 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;
    }

    // Überprüft zunächst die Länge des Namens und aktualisiert dann den Namen.
    set name(name: string) {
        if (name.length > 10) {
            throw new Error("Name hat eine maximale Länge von 10");
        }

        this._name = name;  
    }

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

}

const person = new Person('Willem');

// wirft keine Fehlermeldung, Setter-Funktion wird nicht aufgerufen, wenn this._name in der Objektmethode geändert wird
person.doStuff();  

// wirft einen Fehler, weil der Setter aufgerufen wird und der Name länger als 10 Zeichen ist
person.name = 'barbarbarbarbarbar';

Answer 2

Es ist sehr ähnlich wie das Erstellen von gemeinsamen Methoden, einfach das reservierte Schlüsselwort get oder set am Anfang setzen.

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 den Rückgabetyp in get getMethod1() { überspringen

    get getMethod1() {
        return this._name;
    }

Answer 3

Basierend auf dem von Ihnen gezeigten Beispiel möchten Sie ein Datenobjekt übergeben und eine Eigenschaft dieses Objekts mit get() abrufen. Dafür müssen Sie einen generischen Typ verwenden, da das Datenobjekt generisch ist und jedes Objekt sein kann.

export class Attributes {
    constructor(private data: T) {}
    get = (key: K): T[K] => {
      return this.data[key];
    };
    set = (update: T): void => {
      //   Das ist wie der Spread-Operator. Es nimmt das this.data-Objekt und überschreibt es mit dem update-Objekt
      // In der tsconfig.json Ändern Sie das Ziel auf Es6, um Object.assign() verwenden zu können
      Object.assign(this.data, update);
    };
    getAll(): T {
      return this.data;
    }
  }

< T > bezieht sich auf den generischen Typ. Lassen Sie uns eine Instanz initialisieren

 const myAttributes=new Attributes({name:"etwas",age:32})

 myAttributes.get("name")="etwas"

Beachten Sie diese Syntax

Um dies verwenden zu können, sollten wir uns zweier Dinge bewusst sein:

1- In typescript können Zeichenketten ein Typ sein.

2- Alle Objekteigenschaften in JavaScript sind im Wesentlichen Zeichenketten.

Wenn wir get() verwenden, ist der Typ des Arguments, das es empfängt, eine Eigenschaft des Objekts, das dem Konstruktor übergeben wurde, und da Objekteigenschaften Zeichenketten sind und Zeichenketten in typescript als Typ erlaubt sind, könnten wir verwenden

Answer 4

Wenn Sie einen Weg suchen, um get und set auf jedes Objekt (nicht eine Klasse) zu verwenden, könnte Proxy nützlich 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 ein Polyfill für ältere Browser erforderlich ist

Answer 5

Im Folgenden finden Sie ein Beispiel, wie Sie Getter & Setter hinzufügen können:

class Person {
    private _age: number;
    private _firstName: string;
    private _lastName: string;

    public get age() {
        return this._age;
    }

    public set age(theAge: number) {
        if (theAge <= 0 || theAge >= 200) {
            throw new Error('Das Alter ist ungültig');
        }
        this._age = theAge;
    }

    public getFullName(): string {
        return `${this._firstName} ${this._lastName}`;
    }
}