在TypeScript中获取并设置

TypeScript

十三

2020-05-28

我正在尝试为属性创建get和set方法:

private _name: string;

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

设置值的关键字是什么?

第4237篇《在TypeScript中获取并设置》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

4个回答
小次郎 2020.05.28

你可以写这个

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

}
老丝阿飞 2020.05.28

如果您正在使用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"
番长 2020.05.28

TypeScript使用类似于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构建工具的配置中。您可以在这里看到

就像@DanFromGermany在下面建议的那样,如果您只是在读写本地属性(例如)foo.bar = true,那么拥有一对setter和getter对就太过分了。如果需要在读取或写入属性时执行某些操作(例如日志记录),则以后可以随时添加它们。

斯丁前端 2020.05.28

这是一个工作示例,应该为您指明正确的方向:

class Foo {
    _name;

    get Name() {
        return this._name;
    }

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

JavaScript中的getter和setter只是正常功能。设置器是一个函数,它接受一个参数,其值就是要设置的值。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android