web-dev-qa-db-fra.com

obtenir et définir dans TypeScript

J'essaie de créer la 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
521
MuriloKunze

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 fonctionnalité 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 utilisez le compilateur en ligne de commande, utilisez --target flag comme ceci;

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 voir que ici :

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

875
Ezward

Ezward a déjà fourni une bonne réponse, mais j'ai remarqué qu'un des commentaires demandait comment il était utilisé. Pour les personnes 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 les setters sur le site Web TypeScript, car cela explique bien la situation et restera toujours à l’état actuel des changements. made, 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 devriez simplement faire ceci:

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

étant donné un cours comme:

class foo {
  private _bar:boolean = false;

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

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

89
TornadoAli

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 accesseurs et les 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.

50
Brian Terlson

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

}
4
k33g_org

Cela ressemble beaucoup à la création de méthodes communes, il suffit de placer le mot clé reserved get ou set au 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;
    }
2
Angel Angel

TS propose des getters et des setters qui permettent aux propriétés de l’objet d’avoir plus de contrôle sur leur accès (getter) ou leur mise à jour (setter) extérieur 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';
0
Willem van der Veen

Je pense que je comprends probablement pourquoi est-ce si déroutant. Dans votre exemple, nous voulions des getters et des setters pour _name. Mais nous y parvenons en créant des getters et des setters pour une variable de classe non liée 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. get et set créent un getter et un configurateur pour yourCarTiresCount (pas pour tiresCount).

Le getter est:

function() {
    return this.tiresCount ;
}

et le passeur est:

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

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

  1. indirectement crée un getter, mais pas le séparateur, pour le privé tireCount.
0
dasfdsa