obtenir et définir en TypeScript

J'essaie de créer une méthode get et set pour une propriété:

private _name: string;

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

Quel est le mot clé pour définir une valeur?

TypeScript utilise une syntaxe getter / setter semblable à ActionScript3.

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

Cela produira ce JavaScript, en utilisant la fonction ECMAScript 5 Object.defineProperty().

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

Donc, pour l'utiliser,

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

Cependant, pour pouvoir l'utiliser, vous devez vous assurer que le compilateur TypeScript cible ECMAScript5. Si vous exécutez le compilateur de ligne de commande, utilisez un --targetindicateur comme celui-ci;

tsc --target ES5

Si vous utilisez Visual Studio, vous devez modifier votre fichier de projet pour ajouter l'indicateur à la configuration de l'outil de génération TypeScriptCompile. Vous pouvez le voir ici :

Comme @DanFromGermany le suggère ci-dessous, si vous lisez et écrivez simplement une propriété locale comme foo.bar = true, alors avoir une paire setter et getter est exagéré. Vous pouvez toujours les ajouter ultérieurement si vous avez besoin de faire quelque chose, comme la journalisation, chaque fois que la propriété est lue ou écrite.

Ezward a déjà fourni une bonne réponse, mais j'ai remarqué que l'un des commentaires demande comment il est utilisé. Pour les gens comme moi qui tombent sur cette question, j'ai pensé qu'il serait utile d'avoir un lien vers la documentation officielle sur les getters et setters sur le site Web de Typescript car cela l'explique bien, nous espérons toujours rester à jour car les changements sont fait, et montre un exemple d'utilisation:

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

En particulier, pour ceux qui ne le connaissent pas, notez que vous n'incorporez pas le mot «get» dans un appel à un getter (et de même pour les setters):

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

Vous devez simplement faire ceci:

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

étant donné une classe comme:

class foo {
  private _bar:boolean = false;

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

alors le getter 'bar' de la propriété privée '_bar' sera appelé.

Voici un exemple de travail qui devrait vous orienter dans la bonne direction:

class Foo {
    _name;

    get Name() {
        return this._name;
    }

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

Les getters et setters en JavaScript ne sont que des fonctions normales. Le setter est une fonction qui prend un paramètre dont la valeur est la valeur en cours de définition.

Tu peux écrire ça

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 propose des getters et setters qui permettent aux propriétés d'objet d'avoir plus de contrôle sur la façon dont elles sont accédées (getter) ou mises à jour (setter) en dehors de l'objet. Au lieu d'accéder directement à la propriété ou de la mettre à jour, une fonction proxy est appelée.

Exemple:

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

C'est très similaire à la création de méthodes courantes, il suffit de mettre le mot-clé réservé getou setau début.

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

Dans ce cas, vous pouvez ignorer le type de retour dans get getMethod1() {

    get getMethod1() {
        return this._name;
    }

Je pense que je comprends probablement pourquoi c'est si déroutant. Dans votre exemple, nous voulions des getters et setters _name. Mais nous y parvenons en créant des getters et setters pour une variable de classe indépendante Name.

Considère ceci:

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

Le code ci-dessus fait ce qui suit:

1. getet setcréer getter et setter pour yourCarTiresCount( pas pourtiresCount ).

Le getter est:

function() {
    return this.tiresCount ;
}

et le passeur est:

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

Ce qui signifie, chaque fois que nous le faisons new Car().yourCarTiresCount, getter court. Et pour chaque new Car().yourCarTiresCount('7')setter s'exécute.

2. Créez indirectement getter, mais pas le setter, pour privé tireCount.

Si vous cherchez un moyen d'utiliser get et set sur n'importe quel objet (pas une classe) Proxy peut être utile: 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

Remarque: sachez qu'il s'agit d'une nouvelle API non prise en charge et polifill requis pour les anciens navigateurs

Si vous travaillez avec des modules TypeScript et essayez d'ajouter un getter qui est exporté, vous pouvez faire quelque chose comme ceci:

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

Ensuite, dans un autre fichier, vous avez:

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