TypeScript'te al ve ayarla

Bir özellik için get ve set yöntemi oluşturmaya çalışıyorum:

private _name: string;

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

Değer ayarlamak için anahtar kelime nedir?

TypeScript, ActionScript3 gibi bir alıcı / ayarlayıcı sözdizimi kullanır.

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

Bu, ECMAScript 5 Object.defineProperty()özelliğini kullanarak bu JavaScript'i üretecektir .

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

Kullanmak için,

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

Ancak, onu kullanmak için, TypeScript derleyicisinin ECMAScript5'i hedeflediğinden emin olmalısınız. Komut satırı derleyicisini çalıştırıyorsanız, --targetböyle bir bayrak kullanın ;

tsc --target ES5

Visual Studio kullanıyorsanız, TypeScriptCompile derleme aracının yapılandırmasına bayrak eklemek için proje dosyanızı düzenlemeniz gerekir. Bunu burada görebilirsiniz :

@DanFromGermany'nin aşağıda belirttiği gibi, sadece yerel bir özelliği okuyup yazıyorsanız foo.bar = true, bir ayarlayıcı ve alıcı çiftine sahip olmak aşırıdır. Özellik okunduğunda veya yazıldığında günlük kaydı gibi bir şey yapmanız gerekiyorsa bunları daha sonra ekleyebilirsiniz.

Ezward zaten iyi bir cevap verdi, ancak yorumlardan birinin nasıl kullanıldığını sorduğunu fark ettim. Benim gibi bu soruya rastlayan insanlar için, iyi açıklayan, yazım web sitesinde alıcılar ve ayarlayıcılar ile ilgili resmi belgelere bir bağlantı kurmanın yararlı olacağını düşündüm, çünkü değişiklikler her zaman güncel kalacaktır. yapılmış ve örnek kullanım gösterir:

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

Özellikle, aşina olmayanlar için, bir alıcıya (ve benzer şekilde ayarlayıcılar için) bir çağrıya 'get' kelimesini eklemediğinizi unutmayın:

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

Bunu basitçe yapmanız gerekir:

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

şöyle bir sınıf verildi:

class foo {
  private _bar:boolean = false;

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

özel '_bar' özelliği için 'bar' alıcısı çağrılır.

İşte size doğru yönü göstermesi gereken çalışan bir örnek:

class Foo {
    _name;

    get Name() {
        return this._name;
    }

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

JavaScript'teki harfler ve ayarlayıcılar yalnızca normal işlevlerdir. Ayarlayıcı, değeri ayarlanan değer olan bir parametreyi alan bir işlevdir.

Bunu yazabilirsin

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 teklifler Alıcıları ve nesne özellikleri onlar (alıcı) veya güncellenmiş (ayarlayıcı) erişilen nasıl daha fazla kontrol için izin belirleyiciler dışında nesnenin. Özelliğe doğrudan erişmek veya bu özelliği güncellemek yerine bir proxy işlevi çağrılır.

Misal:

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

Genel yöntemler oluşturmaya çok benzer, sadece anahtar kelimeyi ayrılmış getveya setbaşlangıçta koymanız yeterlidir .

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

Bu durumda iade türünü atlayabilirsiniz get getMethod1() {

    get getMethod1() {
        return this._name;
    }

Sanırım neden bu kadar kafa karıştırıcı olduğunu anladım. Örneğinizde, alıcılar ve ayarlayıcılar istedik _name. Ancak, ilgisiz bir sınıf değişkeni için alıcılar ve ayarlayıcılar oluşturarak bunu başarıyoruz Name.

Bunu düşün:

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

Yukarıdaki kod şunları yapar:

1. getve setiçin alıcı ve ayarlayıcı oluşturun yourCarTiresCount(için değiltiresCount ).

Alıcı:

function() {
    return this.tiresCount ;
}

ve ayarlayıcı:

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

Yani, her yaptığımızda new Car().yourCarTiresCountgetter koşuyor. Ve her new Car().yourCarTiresCount('7')setter koşusu için.

2. Özel için dolaylı olarak alıcıyı oluşturun, ancak ayarlayıcıyı yaratmayın tireCount.

Eğer herhangi bir nesnede get ve set kullanmanın bir yolunu arıyorsanız (bir sınıf değil) Proxy yararlı olabilir: 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

Not: Bunun yeni API desteklenmediğini ve daha eski tarayıcılar için gerekli yükseltmenin olduğunu unutmayın.

TypeScript modülleriyle çalışıyorsanız ve dışa aktarılan alıcıyı eklemeye çalışıyorsanız, şöyle bir şey yapabilirsiniz:

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

Sonra başka bir dosyada:

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