รับและตั้งค่าใน TypeScript

ฉันกำลังพยายามสร้างและตั้งค่าวิธีการสำหรับทรัพย์สิน:

private _name: string;

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

คำหลักเพื่อกำหนดค่าคืออะไร

TypeScript ใช้ไวยากรณ์ getter / setter ที่เหมือนกับ ActionScript3

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

ที่จะผลิต JavaScript นี้ใช้ 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;
})();

ดังนั้นที่จะใช้มัน

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

อย่างไรก็ตามเพื่อให้สามารถใช้งานได้คุณต้องแน่ใจว่าคอมไพเลอร์ TypeScript มีเป้าหมาย ECMAScript5 หากคุณใช้คอมไพเลอร์บรรทัดคำสั่งให้ใช้--targetแฟล็กเช่นนี้

tsc --target ES5

หากคุณใช้ Visual Studio คุณต้องแก้ไขไฟล์โครงการของคุณเพื่อเพิ่มการตั้งค่าสถานะให้กับการกำหนดค่าสำหรับเครื่องมือสร้าง TypeScriptCompile คุณสามารถดูได้ที่นี่ :

ตามที่ @DanFromGermany แนะนำด้านล่างหากคุณเพียงแค่อ่านและเขียนอสังหาริมทรัพย์ในพื้นที่เช่นfoo.bar = trueนั้นแล้วการมีคู่เซทเทอร์และทะเยอทะยานก็เกินความจริง คุณสามารถเพิ่มพวกเขาได้ในภายหลังหากคุณต้องการทำบางสิ่งเช่นการบันทึกเมื่อใดก็ตามที่คุณสมบัติถูกอ่านหรือเขียน

Ezward ได้ให้คำตอบที่ดีอยู่แล้ว แต่ฉันสังเกตเห็นว่าหนึ่งในความคิดเห็นถามว่ามันถูกใช้อย่างไร สำหรับคนอย่างฉันที่สะดุดกับคำถามนี้ฉันคิดว่ามันจะมีประโยชน์ที่จะมีลิงก์ไปยังเอกสารอย่างเป็นทางการเกี่ยวกับ getters และ setters บนเว็บไซต์ typescript ตามที่อธิบายได้ดีหวังว่าจะได้รับการปรับปรุงให้ทันสมัยอยู่เสมอเมื่อมีการเปลี่ยนแปลง ทำและแสดงการใช้งานตัวอย่าง:

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

โดยเฉพาะอย่างยิ่งสำหรับผู้ที่ไม่คุ้นเคยโปรดทราบว่าคุณไม่ได้รวมคำว่า 'รับ' ไว้ในการโทรไปยังผู้ทะเยอทะยาน (และในทำนองเดียวกันสำหรับผู้ตั้งค่า):

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

คุณควรทำสิ่งนี้:

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

รับชั้นเรียนเช่น:

class foo {
  private _bar:boolean = false;

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

จากนั้นจะเรียกคุณสมบัติ 'บาร์' สำหรับ '_bar' ส่วนตัว

นี่คือตัวอย่างการทำงานที่ควรชี้คุณไปในทิศทางที่ถูกต้อง:

class Foo {
    _name;

    get Name() {
        return this._name;
    }

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

Getters และ setters ใน JavaScript เป็นเพียงฟังก์ชั่นปกติ setter เป็นฟังก์ชั่นที่รับพารามิเตอร์ซึ่งค่าคือค่าที่ตั้งไว้

คุณสามารถเขียนสิ่งนี้

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 เสนอตัวเชื่อมต่อและตัวตั้งค่าซึ่งอนุญาตให้คุณสมบัติของวัตถุมีการควบคุมวิธีเข้าถึง (getter) หรืออัพเดต (ตัวตั้ง) ภายนอกมากขึ้นวัตถุได้มากขึ้น แทนที่จะเข้าถึงหรืออัพเดตคุณสมบัติโดยตรงจะมีการเรียกใช้ฟังก์ชันพร็อกซี

ตัวอย่าง:

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

มันคล้ายกันมากกับการสร้างวิธีการทั่วไปเพียงแค่ใส่คำหลักที่สงวนไว้getหรือsetที่จุดเริ่มต้น

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

ในกรณีนี้คุณสามารถข้ามประเภทกลับมา get getMethod1() {

    get getMethod1() {
        return this._name;
    }

ฉันคิดว่าฉันคงเข้าใจว่าทำไมมันถึงสับสน ในตัวอย่างของคุณเราต้องการผู้ได้รับและผู้ตั้ง_nameค่า แต่เราบรรลุว่าด้วยการสร้าง getters และ setters Nameสำหรับตัวแปรระดับที่ไม่เกี่ยวข้องกัน

พิจารณาสิ่งนี้:

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

โค้ดด้านบนทำตาม:

1. getและsetสร้าง getter และ setter สำหรับyourCarTiresCount( ไม่ใช่สำหรับtiresCount )

ทะเยอทะยานคือ:

function() {
    return this.tiresCount ;
}

และสุนัขเป็น:

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

ความหมายเวลาที่เราทำทุกnew Car().yourCarTiresCount, getter วิ่ง และสำหรับnew Car().yourCarTiresCount('7')setter ทุกตัวที่ทำงาน

2. อ้อมสร้างทะเยอทะยาน tireCountแต่ไม่ได้ตั้งค่าสำหรับส่วนตัว

หากคุณกำลังมองหาวิธีใช้รับและตั้งค่าบนวัตถุใด ๆ (ไม่ใช่คลาส) Proxy อาจเป็นประโยชน์: 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

หมายเหตุ: โปรดทราบว่านี่ไม่ใช่ api ใหม่ที่ไม่รองรับและจำเป็นต้องใช้ polifill สำหรับเบราว์เซอร์รุ่นเก่า

หากคุณทำงานกับโมดูล TypeScript และกำลังพยายามเพิ่มทะลวงที่ส่งออกคุณสามารถทำสิ่งนี้:

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

จากนั้นในไฟล์อื่นคุณมี:

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