您好,登录后才能下订单哦!
这篇文章主要介绍“TypeScript中怎么使用getter和setter”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“TypeScript中怎么使用getter和setter”文章能帮助大家解决问题。
使用 get
和 set
关键字在 TypeScript 中定义 getter 和 setter。 getter 使我们能够将属性绑定到在访问属性时调用的函数,而 setter 将属性绑定到在尝试设置属性时调用的函数。
class Developer { private _language = ''; private _tasks: string[] = []; get language() { return this._language; } set language(value: string) { this._language = value; } get tasks() { return this._tasks; } set tasks(value: string[]) { this._tasks = value; } } const dev = new Developer(); dev.language = 'TypeScript'; console.log(dev.language); // ????️ "TypeScript" dev.tasks = ['develop', 'test']; dev.tasks.push('ship'); console.log(dev.tasks); // ['develop', 'test', 'ship']
Developer 类有 2 个 getter
和 setter
。
get 语法将对象属性绑定到函数,因此每次访问该属性时,都会调用该函数。
当我们访问类实例的语言属性时,我们调用的是 language() 方法。
set 语法将对象属性绑定到函数,每次尝试设置属性时,都会调用该函数。
需要注意的是,尽管我们在后台调用类方法,但我们使用
getter
和setter
就像在对象上使用常规属性一样。
我们不应尝试将 setter 称为 myInstance.mySetter('TypeScript')
,而应将属性设置为 myInstance.mySetter = ‘TypeScript’。
请注意,我们在类中声明 _language
和 _tasks
属性时使用了 private 关键字。
class Developer { private _language = ''; private _tasks: string[] = []; get language() { return this._language; } set language(value: string) { this._language = value; } get tasks() { return this._tasks; } set tasks(value: string[]) { this._tasks = value; } }
具有私有可见性的类成员只能在类本身内部访问。
这很重要,因为我们不希望我们的类的消费者能够访问 _language
和 _tasks
属性。
class Developer { private _language = ''; private _tasks: string[] = []; get language() { return this._language; } set language(value: string) { this._language = value; } get tasks() { return this._tasks; } set tasks(value: string[]) { this._tasks = value; } } const dev = new Developer(); // ⛔️ Error: Property '_language' is private // and only accessible within class 'Developer'.ts(2341) console.log(dev._language);
尝试从类外部访问私有属性会导致错误,这正是我们需要的,以确保消费者按预期使用 getter
和 setter
。
使用下划线前缀,因为我们需要一个不同的属性名称,以避免我们的 getter
和 setter
方法中的无限循环。
以下实现会导致无限循环。
class Developer { private language = 'TypeScript'; set language(value: string) { // ⛔️ Error: Maximum call stack exceeded this.language = value; } } const dev = new Developer();
代码中的问题是 - 我们没有使用下划线来为类中的语言属性添加前缀。
因此,每次调用
setter
时,它都会设置属性,并在每次设置属性时不断调用自身。
如果我们只为特定属性定义 getter
,则该属性会自动标记为只读。
class Developer { private _language = 'TypeScript'; get language() { return this._language; } } const dev = new Developer(); console.log(dev.language); // ????️ "TypeScript" // ⛔️ Cannot assign to 'language' because //it is a read-only property.ts(2540) dev.language = 'TypeScript';
我们只为语言属性分配了一个 getter
,因此不能重新分配它。
如果我们没有显式键入 setter
参数,TypeScript 能够从 getter
的返回类型推断它。
class Developer { private _language = ''; get language() { return this._language; } // ????️ (parameter) value: string (inferred) // from getter return type set language(value) { this._language = value; } } const dev = new Developer(); dev.language = 'TypeScript'; console.log(dev.language); // ????️ "TypeScript"
即使我们没有在 setter
中显式键入 value 参数,TypeScript 仍然知道它是 string 类型,因为语言 getter
返回一个 string 类型的值。
我们还可以设置在实例化类时使用 getter
和 setter
的属性的值。
class Developer { private _language = ''; // ????️ use a constructor method constructor(language: string) { this.language = language; } get language() { return this._language; } set language(value: string) { this._language = value; } } const dev = new Developer('TypeScript'); console.log(dev.language); // ????️ "TypeScript" dev.language = 'JavaScript'; console.log(dev.language); // ????️ "JavaScript"
实例化类时调用构造函数方法。 该方法采用语言参数并使用已定义的设置器初始化其值。
如果我们不想使用 setter 在构造函数中初始化属性,也可以使用 _language
属性。
class Developer { private _language = ''; constructor(language: string) { // ????️ Not using setter (_language instead of language) this._language = language; } get language() { return this._language; } set language(value: string) { this._language = value; } } const dev = new Developer('TypeScript'); console.log(dev.language); // ????️ "TypeScript" dev.language = 'JavaScript'; console.log(dev.language); // ????️ "JavaScript"
上面的示例没有使用 setter
方法为语言属性设置初始值,因为我们在属性前面加上了下划线。
关于“TypeScript中怎么使用getter和setter”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注亿速云行业资讯频道,小编每天都会为大家更新不同的知识点。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。