在TypeScript中获取和设置

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

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

设置值的关键字是什么?

887847 次浏览

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

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

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 5Object.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 gettermyFoo.bar = false;  // calls the setter and passes false}

但是,为了使用它,您必须确保TypeScript编译器的目标是ECMAScript5。如果您正在运行命令行编译器,请像这样使用--target标志;

tsc --target ES5

如果您使用的是Visual Studio,您必须编辑您的项目文件以将标志添加到TypeScriptCompile构建工具的配置中。您可以看到这里

正如@DanFrom德国在下面建议的那样,如果你只是简单地读写像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 barconsole.log(iBazInstance.baz)  // prints baz

Ezward已经提供了一个很好的答案,但是我注意到其中一条评论询问它是如何使用的。对于像我这样偶然发现这个问题的人,我认为在TypeScript网站上有一个到getter和setter官方留档的链接会很有用,因为这很好地解释了它,希望在进行更改时始终保持最新,并显示示例用法:

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

特别是,对于那些不熟悉它的人,请注意不要将单词'get'合并到对getter的调用中(对于setter也是如此):

var myBar = myFoo.getBar(); // wrongvar 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。

它与创建常用方法非常相似,只需将关键字保留getset放在开头。

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的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')}}

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

  1. getsetyourCarTiresCount不是为了#3)创建getter和setter。

getter是:

function () {return this.tiresCount;}

而setter是:

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

意思是,每次我们做new Car().yourCarTiresCount,getter运行。对于每个new Car().yourCarTiresCount('7') setter运行。

  1. 间接为私有tireCount创建getter,但不是setter。

如果您正在使用TypeScript模块并尝试添加导出的getter,您可以这样做:

// dataStore.tsexport const myData: string = undefined;  // just for typing supportlet _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"

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 changedperson.doStuff();
// throws error because setter is called and name is longer than 10 charactersperson.name = 'barbarbarbarbarbar';

如果您正在寻找在任何对象(不是类)上使用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); // helloconsole.log(proxy3.message2); // world

注意:请注意,这是不支持的新API,并且需要旧浏览器

根据您展示的示例,您想通过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-在typestring字符串可以是一个类型。

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

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

下面是一个如何添加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#--strictpropertyinitializationhttps://www.typescriptlang.org/tsconfig#strictPropertyInitialization