TypeScript中Getter/Setter用法詳解
一、寫在前面
第一天
寫在前面，先看幾段代碼，用你的大腦編譯運行一下試試？ No errors, no warnings!
const config = new Config() config.version = '1.0.0' console.log(config.version)
乍一看，這代碼會打印 1.0.0，于是跑一下試試？
于是打開 Config 類看看，好家伙
export class Config {
private _version!: string
public get version(): string {
return this._version
}
public set version(value: string) {
this._version = '莫挨勞資'
}
}
原來是 getter/setter ??！這玩意我熟！原來 config.version = '1.0.0' 不是給 Config 的 version 字段賦值，而是調(diào)用了一個 version 的 set 方法。
這點我可是很不喜歡的，這已經(jīng)讓人產(chǎn)生了心智負(fù)擔(dān)，賦值、方法調(diào)用傻傻分不清楚，還得看了實現(xiàn)才知道。
第二天
你再問我上面的問題，我可不敢拍著胸脯說答案了。
于是第二個問題又來了
const user = new User() user.name = '彭于晏' user.age = 33 user.length = '15cm' console.log(JSON.stringify(user))
憑我三十余年生活經(jīng)驗，這不是在序列化JSON到字符串嗎？分分鐘在腦海里編譯運行，肯定輸出這個?。?/p>
{"name":"彭于晏","age":33,"length":"15cm"}
因為昨天上當(dāng)了，今天還是驗證跑一下看看結(jié)果：
額，這是什么時候走漏的風(fēng)聲？
表示不服，再一次打開 User 類看看究竟，不看不知道，一看好家伙～
export class User {
/**
* # 昵稱
*/
private nickname!: string
public get name(): string {
return this.nickname
}
public set name(value: string) {
this.nickname = 'Hamm'
}
/**
* # 年齡
*/
private year!: number
public get age(): number {
return this.year
}
public set age(value: number) {
this.year = 22
}
/**
* # 長度
*/
private len!: string
public get length(): string {
return this.len
}
public set length(value: string) {
this.len = `${parseInt(value.replace('cm', '')) + 3}cm`
}
}
這誰干的！干得漂亮?。。?/strong>
以上劇情純屬事實，如有雷同，你也很棒！
二、我不太喜歡Getter和Setter
1. vscode自動重構(gòu)的屬性名帶下劃線
vscode 提供了屬性一鍵自動生成 getter/setter，為了保持屬性名和方法名不重復(fù)，于是會自動生成一個屬性名前面加下劃線的新屬性，然后將原屬性干掉并生成 get set 兩個方法。
生成的最終結(jié)果如下圖
雖然在生成過程中可以新起一個自定義屬性名，但我真的很煩，如果使用默認(rèn)，我的 eslint 規(guī)則又會認(rèn)為 屬性名不符合規(guī)范。。。
2. 調(diào)用方的心智負(fù)擔(dān)
如下面之前貼過的代碼：
const config = new Config() config.version = '1.0.0' console.log(config.version)
在不閱讀 Config 類的情況下，會主觀認(rèn)為 config.version = "1.0.0" 是在給 屬性賦值，而調(diào)用 let version = config.version 會認(rèn)為是將剛才賦的值取出來使用。
3. Get/Set方法和普通方法區(qū)別對待
在有 private protected public 等訪問修飾符的情況下，類本身有 屬性、方法、構(gòu)造 就已經(jīng)足夠滿足需求了，這里非得上一個 get set 連寫法都要區(qū)別對待的特殊方法形式，構(gòu)造方法 constructor 表示第一個不服，勞資都沒特殊對待，憑什么它倆要特殊對待？
4. 我理解的屬性
屬性應(yīng)該是一個類上最基礎(chǔ)的最終數(shù)據(jù)存儲，設(shè)置到屬性上的值是什么，那取出來的值也一定得是什么：
老張，我這瓶水放你這，一會我來拿。
這里我其實是調(diào)用了老張的一個賦值。所以一會回來拿到的水，還是那瓶水：
const store = new Store() store.water = "哇哈哈" // a few moments later console.log(store.water) // 哇哈哈
所以，上面的輸出一定得是 哇哈哈 才合理, 第一天碰到的問題，就不應(yīng)該存在。
5. 我理解的方法
方法應(yīng)該是一個類上的 委托事項流程 的整合體，不管是普通方法，還是get/set，甚至是 構(gòu)造方法。
只是構(gòu)造方法比較特殊，也應(yīng)該是整個類中唯一的特殊。
get / set 方法都應(yīng)該只是從規(guī)范上形成的一些約定俗成的方法，而且既然是方法，get / set 的調(diào)用都應(yīng)該加上 括號 ()，才會便于理解。而且方法名和屬性名也沒有一定不重復(fù)的限定。
三、Getter/Setter的優(yōu)勢
簡單說一些吧。
1. 數(shù)據(jù)攔截
利用 get set 方法來做數(shù)據(jù)攔截，這個點這篇文章中不過多講，可以參考一些前端框架的雙向數(shù)據(jù)綁定實現(xiàn)來學(xué)習(xí)。
2. 數(shù)據(jù)轉(zhuǎn)換
在前后端數(shù)據(jù)轉(zhuǎn)換時，除了我們之前使用的 基于裝飾器-我是這么處理TypeScript項目數(shù)據(jù)轉(zhuǎn)換的 之外，使用 get set 來做數(shù)據(jù)轉(zhuǎn)換可能也會是一個很棒的方式（當(dāng)然，屬性名 和 get/set 不能重復(fù)的問題，還可以再思考思考）。
以上就是TypeScript中Getter/Setter用法詳解的詳細(xì)內(nèi)容，更多關(guān)于TypeScript Getter/Setter的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
利用JavaScript實現(xiàn)春節(jié)倒計時效果(移動端和PC端)
這篇文章主要介紹了通過Html+Css+js如何實現(xiàn)春節(jié)倒計時效果，本文同時介紹了移動端和PC端兩種效果，感興趣的同學(xué)可以跟隨小編一起動手試試2022-01-01
ES6新增了let命令,用來聲明變量,它的用法類似于var,但是所聲明的變量,只在let命令所在的代碼塊內(nèi)有效,下面這篇文章主要給大家介紹了關(guān)于JS中l(wèi)et的基本用法,需要的朋友可以參考下2023-01-01
JavaScript實現(xiàn)表格表單的隨機選擇和簡單的隨機點名
本文主要介紹了JavaScript實現(xiàn)表格表單的隨機選擇和簡單的隨機點名，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
這篇文章主要介紹了ES6對象操作,結(jié)合實例形式詳細(xì)分析了ES6對象創(chuàng)建、賦值、比較、合并等相關(guān)操作技巧與注意事項,需要的朋友可以參考下2020-05-05
JavaScript中利用Array和Object實現(xiàn)Map的方法
這篇文章主要介紹了JavaScript中利用Array和Object實現(xiàn)Map的方法,實例分析了javascript實現(xiàn)map的添加、獲取、移除、清空、遍歷等操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
本文將對在網(wǎng)頁中引用js常會出現(xiàn)的問題進(jìn)行匯總，并提出解決問題的具體方案，有助于我們更好的學(xué)習(xí)和使用js，需要的朋友一起來看下吧2016-12-12
這篇文章主要為大家詳細(xì)介紹了uni-app實現(xiàn)NFC讀取功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
在JavaScript中,幾乎每一個值都是某種特定類型的對象,于是ES6也著重提升了對象的功能性,下面這篇文章主要給大家介紹了關(guān)于es6新增對象實用方法的相關(guān)資料,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了前端實現(xiàn)圖片壓縮的幾種方法和技術(shù),包括使用HTML5的canvas元素和推薦的第三方庫image-magic-adapter,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-01-01
JS下載文件的實現(xiàn)在網(wǎng)上可以找到很多教程，不過本文為大家介紹的是無刷新下載文件，貌似更酷一點是吧2014-04-04