在 TypeScript 中获取和设置

TypeScript 使用类似于 ECMAScript4/ActionScript3 的 getter/setter 语法。

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

这将使用 ECMAScript 5 Object.defineProperty() 功能生成此 JavaScript。

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 构建工具的配置。您可以看到 here：

正如@DanFromGermany 下面建议的那样，如果您只是读取和写入像 foo.bar = true 这样的本地属性，那么使用 setter 和 getter 对就过分了。如果您需要在读取或写入属性时执行某些操作（例如日志记录），您可以随时添加它们。

Getter 可用于实现只读属性。这是一个示例，它还显示了 getter 如何与只读和可选类型交互。

//
// type with optional readonly property.
// baz?:string is the same as baz:string|undefined
//
type Foo = {
    readonly bar: string;
    readonly baz?: string;
}
const foo:Foo = {bar: "bar"}
console.log(foo.bar) // prints 'bar'
console.log(foo.baz) // prints undefined

//
// interface with optional readonly property
//
interface iFoo {
    readonly bar: string;
    readonly baz?: string;
}

const ifoo:iFoo = {bar: "bar"}
console.log(ifoo.bar)  // prints 'bar'
console.log(ifoo.baz)  // prints undefined


//
// class implements bar as a getter, 
// but leaves off baz.
//
class iBarClass implements iFoo {

    get bar() { return "bar" }
}
const iBarInstance = new iBarClass()
console.log(iBarInstance.bar) // prints 'bar'
console.log(iBarInstance.baz) // prints 'undefined'
// accessing baz gives warning that baz does not exist 
// on iBarClass but returns undefined
// note that you could define baz as a getter
// and just return undefined to remove the warning.


//
// class implements optional readonly property as a getter
//
class iBazClass extends iBarClass {
    private readonly _baz?: string

    constructor(baz?:string) {
        super()
        this._baz = baz
    }

    get baz() { return this._baz; }
}

const iBazInstance = new iBazClass("baz")
console.log(iBazInstance.bar)  // prints bar
console.log(iBazInstance.baz)  // prints baz

---

Ezward 已经提供了一个很好的答案，但我注意到其中一条评论询问它是如何使用的。对于像我这样偶然发现这个问题的人，我认为在 Typescript 网站上获得有关 getter 和 setter 的官方文档的链接会很有用，因为这很好地解释了这一点，希望随着更改始终保持最新状态制作，并显示示例用法：

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

特别是，对于那些不熟悉它的人，请注意不要将“get”这个词合并到对 getter 的调用中（对于 setter 也是如此）：

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' 属性的 'bar' getter。

---

这是一个可以为您指明正确方向的工作示例：

class Foo {
    _name;

    get Name() {
        return this._name;
    }

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

JavaScript 中的 getter 和 setter 只是普通的函数。 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 和 setter，它们允许对象属性更好地控制如何在对象外部访问 (getter) 或更新 (setter)。不是直接访问或更新属性，而是调用代理函数。

例子：

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() 获取该对象的属性。为此，您需要使用泛型类型，因为数据对象是泛型的，可以是任何对象。

export class Attributes<T> {
    constructor(private data: T) {}
    get = <K extends keyof T>(key: K): T[K] => {
      return this.data[key];
    };
    set = (update: T): void => {
      //   this is like spread operator. it will take this.data obj and will overwrite with the update obj
      // ins tsconfig.json change target to Es6 to be able to use Object.assign()
      Object.assign(this.data, update);
    };
    getAll(): T {
      return this.data;
    }
  }

指泛型。让我们初始化一个实例

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

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

注意这个语法

<K extends keyof T>

为了能够使用它，我们应该注意两件事：

1- in typestring 字符串可以是一个类型。

2- javascript 中的所有对象属性本质上都是字符串。

当我们使用 get() 时，它接收的参数类型是传递给构造函数的对象的属性，并且由于对象属性是字符串，并且字符串在 typescript 中是允许的类型，我们可以使用这个 <K extends keyof T>

---

我想我可能明白为什么它如此混乱。在您的示例中，我们需要 _name 的 getter 和 setter。但是我们通过为不相关的类变量 Name 创建 getter 和 setter 来实现这一点。

考虑一下：

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

上面的代码执行以下操作：

get 和 set 为 yourCarTiresCount 创建 getter 和 setter（不是为 TiresCount）。

吸气剂是：

function () {
    return this.tiresCount;
}

二传手是：

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

这意味着，每次我们执行 new Car().yourCarTiresCount 时，getter 都会运行。并且对于每个 new Car().yourCarTiresCount('7') 设置器运行。

为私有的tireCount 间接创建getter，而不是setter。

---

与创建常用方法非常相似，只需将关键字reserved 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;
    }

---

如果您正在寻找在任何对象（不是类）上使用 get 和 set 的方法，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

---

下面是一个如何添加 getter 和 setter 的示例 -

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('The age is invalid');
        }
        this._age = theAge;
    }

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

---

虽然 TypeScript 会分析属性的初始化，但如果您总是想自己处理这种情况，您可以在 ts.config.json 中将此设置设置为 false。

{  
  "compilerOptions": {    
    "strict": true,
    "strictPropertyInitialization": false       
  }  
}

严格属性初始化 - strictPropertyInitialization 当设置为 true 时，TypeScript 将在声明了类属性但未在构造函数中设置时引发错误。

在这种情况下，您也应该考虑其他情况，您将在下面的链接中看到。

class UserAccount {
  name: string;
  accountType = "user";
 
  email: string;//Property 'email' has no initializer and is not definitely assigned in the constructor.
  address: string | undefined;
 
  constructor(name: string) {
    this.name = name;
    // Note that this.email is not set
  }
}

this.name 是专门设置的。
this.accountType 默认设置。
this.email 未设置并引发错误。
this.address 被声明为可能未定义，这意味着它不必被设置。

如果我们将 strictPropertyInitialization 设置为 false，编译器不会引发错误

  private _name : string;
  public get name() : string {
    return this._name;
  }
  public set name(v : string) {
    this._name = v;
  }

https://www.typescriptlang.org/docs/handbook/2/classes.html#--strictpropertyinitialization https://www.typescriptlang.org/tsconfig#strictPropertyInitialization

---

如果您正在使用 TypeScript 模块并尝试添加一个导出的 getter，您可以执行以下操作：

// 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"

---