在 TypeScript 中获取和设置
Posted
技术标签:
【中文标题】在 TypeScript 中获取和设置【英文标题】：get and set in TypeScript 【发布时间】：2012-10-01 09:24:24 【问题描述】：我正在尝试为属性创建 get 和 set 方法：
private _name: string;
Name()
get:
return this._name;
set:
this._name = ???;
设置值的关键字是什么？
【问题讨论】：
下划线和 PascalCase 与 Typescript 编码准则冲突：github.com/Microsoft/TypeScript/wiki/Coding-guidelines 嗨@NielsSteenbeek - 遵循 TypeScript 贡献者指南，使用属性和支持字段，您最终会遇到名称冲突。建议的方法是什么？ 或许：typescript private name: string; getName() get: return this.name; set: this.name = ???;
好在那些 Typescript 编码指南很不吸引人。我只会在胁迫下使用它们（例如，我被付钱这样做）。
@NielsSteenbeek：你读过那个文件吗？ “这不是 TypeScript 社区的规范性指南”
【参考方案1】：
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
【讨论】：
不错的答案。另外，请注意，与 C# 不同，TypeScript (v0.9.5) 中的属性当前未虚拟化。当您在派生类中实现“get bar()”时，您将替换父类中的“get bar()”。含义包括无法从派生访问器调用基类访问器。这仅适用于属性 - 方法的行为与您预期的一样。在这里查看 SteveFenton 的回答：***.com/questions/13121431/… 我对下划线有点困惑。打字稿约定说不要对私有变量使用下划线？但是在这种情况下，我们必须使用下划线——否则我们会在私有和公共“bar”之间产生冲突 使用下划线是个人对私有属性的偏好。但是，我相信您是对的，因为我们希望属性具有与 getter/setter 方法不同的名称。 你为什么用myFoo.bar = true而不是myFoo.bar(true);或myFoo.setBar(true);??
@DanFromGermany 属性是一对“get”和“set”方法的“语法糖”。 Microsoft 在 Visual Basic 中提出了属性的概念，并将其带到了 .NET 语言中，例如 C# 和 VB.NET。例如，请参阅Properties (C# Programming Guide)。属性简化了访问对象的状态，并且（在我看来）消除了必须处理“get/set”方法对的“噪音”。 （或者有时只有需要不变性的“获取”方法。）【参考方案2】：
Ezward 已经提供了一个很好的答案，但我注意到其中一个 cmets 询问它是如何使用的。对于像我这样偶然发现这个问题的人，我认为在 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。
【讨论】：
如果我想用一个属性替换一个公共类级别的变量，它是一个直接的替换，我可以放置而不用担心它吗？换句话说，如果我对一个访问器和一个设置器进行回归测试，我可以认为它成功了吗？还是在某些情况下它与 var 的工作方式不完全相同，我需要测试所有 100 个使用此 var/prop 的地方？ 我想知道是否有一种解决方法可以使用下划线将属性名称与 getter 或 setter 方法区分开来。在我正在做的一门课程中，他们说下划线不是首选，但没有给出替代方案。 @cham 你不必在这里使用下划线...你可以调用私有变量 notbar 如果你愿意。【参考方案3】：这是一个可以为您指明正确方向的工作示例：
class Foo
_name;
get Name()
return this._name;
set Name(val)
this._name = val;
JavaScript 中的 Getter 和 setter 只是普通函数。 setter 是一个函数，它接受一个参数，其值为被设置的值。
【讨论】：
明确一点，属性、getter 和 setter 不需要是static。
变量引用仍然是静态的。 Foo._name 应替换为 this._name【参考方案4】：
你可以这样写
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;
【讨论】：
为什么要在构造函数中公开？ 是的，这段代码的构造函数中不能有public。public 这里定义了重复的成员。
可以写但是编译不出来
在 get 和 set 等属性中可以使用 Pascal Case 吗？您能否提供可以增强这种做法的资源或文档？
它对我不起作用，在 set 和 get 中大写，它无法识别。【参考方案5】：
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';
【讨论】：
【参考方案6】：我想我可能明白为什么它如此令人困惑。在您的示例中，我们需要 _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') setter 运行。
-
间接为私有
tireCount 创建getter，而不是setter。
【讨论】：
【参考方案7】：根据您展示的示例，您希望传递一个数据对象并通过 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>
【讨论】：
【参考方案8】：与创建常用方法很相似，只需将关键字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;
【讨论】：
【参考方案9】：如果您正在寻找在任何对象（不是类）上使用 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
【讨论】：
【参考方案10】：以下是如何添加 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`;
【讨论】：
【参考方案11】：如果您正在使用 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"
【讨论】：
这是个糟糕的建议。特别是，this 必须在模块的***范围内未定义。你可以改用exports，但你根本不应该这样做，因为它实际上会导致兼容性问题以上是关于在 TypeScript 中获取和设置的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Jest 的自定义测试环境文件中使用 TypeScript？
在 Angular 5 TypeScript 中触发 keyup 事件